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

【问题标题】：JSPDF downloads blank pdf file first time, but next it downloads properJSPDF第一次下载空白pdf文件，但接下来会正确下载
【发布时间】：2016-08-19 09:43:41
【问题描述】：

我正在尝试使用 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');

【问题讨论】：

标签： javascript pdf svg jspdf

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

【讨论】：