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无法创建完整的画布，因此有一个名为renderCallback的回调函数在画布渲染完成后调用。之后你可以妥善保存。

此处还可参考其他选项https://github.com/gabelerner/canvg

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

1 个答案: