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

Question

我使用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。 在控制台中，只显示“测试”和“再次测试”，所以我猜脚本没有运行。

我错过了什么？ 我正在使用 bootstrap tab 函数和一些使用highchart生成的图表。 jsPDF 处理起来是不是太复杂了？

Answer 1

这是因为回调函数改成了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 2

首先，您需要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 完成时，这个问题的行为可能会有所不同。

Answer 3

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

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 个解决方案

解决方案1
7 2019-02-01 21:57:23

解决方案2
5 2016-01-04 18:49:16

解决方案3
0 2015-03-25 07:12:48

解决方案4
0 2020-06-25 13:52:45

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

问题描述

4 个解决方案

解决方案1 7 2019-02-01 21:57:23

解决方案2 5 2016-01-04 18:49:16

解决方案3 0 2015-03-25 07:12:48

解决方案4 0 2020-06-25 13:52:45

解决方案1
7 2019-02-01 21:57:23

解决方案2
5 2016-01-04 18:49:16

解决方案3
0 2015-03-25 07:12:48

解决方案4
0 2020-06-25 13:52:45