html和canvas中的字体类型不同答案

【问题标题】：Font type is different in html and canvashtml和canvas中的字体类型不同
【发布时间】：2017-03-23 21:49:09
【问题描述】：

我正在使用 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

【问题讨论】：

标签： angularjs html2canvas

【解决方案1】：

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

您可以尝试在开发工具中调试 html2canvas 源代码，例如函数 Font(family, size) 和 cloneNode(node, javascriptEnabled) 以查看您页面的 HTML 是如何被处理的，并查看内部DOM 节点对象。

【讨论】：