JSPDF 第一次下载空白 pdf 文件，但接下来它下载正确

Question

我正在尝试使用 JSPF 库将 svg 图导出为 pdf。问题是当用户第一次点击下载时它会给出空白的 pdf 文件但第二次它生成正确的文件。以下是我的代码，请帮助我从最近两天开始尝试。

    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var svg = document.querySelector('svg');
    var serializer = new XMLSerializer();
    var svgString = serializer.serializeToString(svg);

    canvg(canvas, svgString);
    var imgData = canvas.toDataURL('image/jpeg');
    var pdf = new jsPDF('p', 'pt', 'ledger');
    pdf.setFontSize(10);
    pdf.text(35, 25, "Google Cloud Craft");

    pdf.addImage(imgData, 'JPEG', 50, 40);
    pdf.save(projectIdName + '.pdf');

Answer 1

终于解决了，忘了一个基本的东西，处理canvg函数的回调函数。

canvg(canvas, svgString,{
        renderCallback: function(){
            var imgData = canvas.toDataURL('image/jpeg');
            var pdf = new jsPDF('p', 'pt', 'ledger');
            pdf.setFontSize(10);
            pdf.text(35, 25, "CLouditect");

            pdf.addImage(imgData, 'JPEG', 50, 40);
            pdf.save(projectIdName + '.pdf');
            $('#background-svg').remove();
        }
    });

问题是 canvg 无法创建完整的 canvas，因此有一个名为 renderCallback 的回调函数，它会在 canvas 渲染完成后调用。之后就可以妥善保存了。

这里也可以参考其他选项https://github.com/gabelerner/canvg

JSPDF 第一次下载空白 pdf 文件，但接下来它下载正确

JSPDF downloads blank pdf file first time, but next it downloads proper

javascript

pdf

svg

jspdf