jsPDF addHTML方法不工作，没有错误消息

jsPDF addHTML method not working with no error message

本文关键字：有错误 消息 工作 addHTML 方法 jsPDF      更新时间：2023-09-26

我使用jsPdf官方演示站点中的示例来测试新的addHTML函数，只做了一点更改就可以直接保存生成的PDF。

console.log("testing");
var pdf = new jsPDF('p','pt','a4');
pdf.addHTML(document.body,function() {
    console.log("started");
    pdf.save()
    console.log("finished");
});
console.log("testing again");

当我运行上面的脚本时，它不会生成错误消息，但也不会生成PDF。在控制台中，只显示"测试"answers"再次测试"，所以我猜脚本没有运行。

我错过了什么？我正在使用引导选项卡功能和一些使用highchart生成的图表。jsPDF处理起来太复杂了吗？

这是因为回调函数已更改为promise。

进行以下更改。

pdf.addHTML(document.body,function() {
    console.log("started");
    pdf.save()
    console.log("finished");
});

至

pdf.addHTML(document.body).then(()=> {
    console.log("started");
    pdf.save()
    console.log("finished");
});

首先，您需要html2canvas或rasterizeHTML来使用jsPDF的addHTML方法。进一步的问题是jsPDF覆盖了html2canvas库定义的许多方法。只需查看jsPDF源代码并搜索html2canvas即可。即使在我的项目中包含了html2canvas脚本之后，我也遇到了与您描述的完全相同的问题。

最后一个问题是包含脚本的顺序。对我来说，它适用于当前版本的jsPDF（1.1.239）和html2canvas（0.5.0-alpha1），首先包括jsPDF，然后包括html2canvas。在我的项目中，它看起来像这样：

<head>
    <script src="./lib/jspdf/jspdf.debug.js"></script>
    <script src="./lib/html2canvas/html2canvas.js"></script>
    <!-- more includes ... -->
</head>

我认为在jsPDF中重写html2canvas方法是一种糟糕的做法，因为当html2canvas更改时很难维护，正如这个问题所示。

当通过RequireJS进行脚本包含时，这个问题的表现可能会有所不同。

jspdf无法转换svg元素。使用此库可以轻松完成此操作。

示例用法-

function _svgToCanvas() {
    var nodesToRecover = [];
    var nodesToRemove = [];
    var svgElems = document.getElementsByTagName("svg");
    for (var i = 0; i < svgElems.length; i++) {
        var node = svgElems[i];
        var parentNode = node.parentNode;
        var svg = parentNode.innerHTML;
        var canvas = document.createElement('canvas');
        canvg(canvas, svg);
        nodesToRecover.push({
            parent: parentNode,
            child: node
        });
        parentNode.removeChild(node);
        nodesToRemove.push({
            parent: parentNode,
            child: canvas
        });
        parentNode.appendChild(canvas);
    }
}

然后-

var pdf = new jsPDF('p', 'px', 'a4');
var options = {
    pagesplit: true
};
pdf.addHTML($('body'), 0, 0, options, function () {
     console.log("done");
     pdf.save('test.pdf')
  });

也有同样的问题。虽然我不确定addHTML的确切问题是什么，但我还是设法使用html2canvas:使其正常工作

html2canvas(document.body).then(canvas => {
    var pdf = new jsPDF('p', 'pt', 'a4');
    pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 210, 297);
    pdf.save();
});
相关文章：