Question

我正在使用jsPdf official demo site中的示例测试新的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。在控制台中，只显示“测试”和“再次测试”，所以我猜这个脚本没有运行。

我错过了什么？我正在使用bootstrap选项卡功能和使用highchart生成的一些图表。 jsPDF难以处理吗？

Answer 1

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

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

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

我认为在jsPDF中覆盖html2canvas方法是不好的做法，因为当html2canvas改变时很难维护，正如这个问题所示。

当脚本包含通过RequireJS完成时，这个问题可能会有所不同。

Answer 2

这是因为回调函数已更改为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");
});

Answer 3

jspdf无法转换svg元素。这可以使用this库轻松完成。

使用示例 -

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')
  });

Answer 4

有同样的问题。尽管我不确定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();
});

jsPDF addHTML方法无法使用没有错误消息

4 个答案: