字体类型在html和canvas中有所不同

Question

我正在使用 html2canvas lib将我的html页面渲染为图像，然后使用 jspdf 将其放入PDF。但不知何故，我的html页面字体与PDF文件中的字体不同。

$scope.ConvertToPdf = function(obj){
        $scope.downloadPdfArr = [];
        $scope.downloadPdfArr = angular.copy(obj);

        html2canvas($("#widget"),{
            onrendered : function(canvas){

                var imgData = canvas.toDataURL(
                    'image/png');              
                var doc = new jsPDF();
                doc.addImage(imgData, 'PNG', 10, 10,200,100);
                doc.save('sample-file.pdf');


            }
        })
    }

这是我的html页面

这是我正在获取的PDF

Answer 1

html2canvas并不声称处理所有类型的styling - 如果您的页面上有字体样式属性，则可能无法正确处理或根本无法处理。浏览器也可能不同 - 您使用哪种浏览器来获得此结果？

您可以尝试在开发工具中调试html2canvas源，例如函数Font（系列，大小）和cloneNode（node，javascriptEnabled），以查看页面的HTML是如何处理的，并查看DOM节点对象。