使用 JSPDF 将画布图表导出为 PDF答案

【问题标题】：Export Canvas Chart to PDF using JSPDF使用 JSPDF 将画布图表导出为 PDF
【发布时间】：2020-11-17 10:30:26
【问题描述】：

我正在使用 jspdf 以 PDF 格式导出画布图表和相关数据。我能够正确获取数据，但无法获取 PDF 中的图表图像。以下是我的代码：

    var doc = new jsPDF();
    
    var canvas = document.getElementById('graph');
    var canvasImg = canvas.toDataURL();
    console.log(canvasImg);

    var rows = [];
    for (var i = 0; i < dataFFTvalues.length; ++i) {
        for (var j = 0; j < dataFFTvalues[i].length; ++j) {
            dataFFTvalues[i][j] = dataFFTvalues[i][j];
        }
        rows.push(dataFFTvalues[i]); //.join(',')
    }

    var img = new Image();
    img.src = 'http://domainname.com/portal/img/logo.png';

    img.onload = function(){
        doc.setFontSize(15);
        doc.addImage(img, 'PNG', 160, 5, 40 , 18);
        doc.text(90, 20, "Report");
        doc.setFontSize(10);
        doc.text(15, 40, "Below are the metric details : ");

        doc.autoTable(columns, rows, {startY: 85}); 
        doc.addPage();
        doc.internal.scaleFactor = 1.8;
        var width = doc.internal.pageSize.width;     
        doc.addImage(canvasImg, 'PNG', 5, 20, width-20, 70);
        doc.save('FFTcanvas.pdf');
    }

行和徽标图像以 PDF 格式正确导出。但是“canvasImg”并没有出现空白。 'canvasImg' 的控制台输出：

数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAABQkAAAG2CAYAAADcLQBGAAAgAElEQVR4Xu3YQREAAAjDMObfNEIaHJDbqztHgAABAgQIECBAgAABAgQIECBAgEBaYOnvPU + AAAECBAgQIECAAAECBAgQIECAwImERkCAAAECBAgQIECAAAECBAgQIEAgLiASxgfgfQIECBAgQIAAAQIECBAgQIAAAQIioQ0QIECAAAECBAgQIECAAAECBAgQiAuIhPEBeJ8AAQIECBAgQIAAAQIECBAgQICASGgDBAgQIECAAAECBAgQIECAAAECBOICImF8AN4nQIAAAQIECBAgQIAAAQIECBAgIBLaAAECBAgQIECAAAECBAgQIECAAIG4gEgYH4D3CRAgQIAAAQIECBAgQIAAAQIECIiENkCAAAECBAgQIECAAAECBAgQIEAgLiASxgfgfQIECBAgQIAAAQIECBAgQIAAAQIioQ0QIECAAAECBAgQIECAAAECBAgQiAuIhPEBeJ8AAQIECBAgQIAAAQIECBAgQICASGgDBAgQIECAAAECBAgQIECAAAECBOICImF8AN4nQIAAAQIECBAgQIAAAQIECBAgIBLaAAECBAgQIECAAAECBAgQIECAAIG4gEgYH4D3CRAgQIAAAQIECBAgQIAAAQIECIiENkCAAAECBAgQIECAAAECBAgQIEAgLiASxgfgfQIECBAgQIAAAQIECBAgQIAAAQIioQ0QIECAAAECBAgQIECAAAECBAgQiAuIhPEB ...... P>

期待建议和帮助。

【问题讨论】：

您是否尝试过将引用传递给<canvas>-element 而不是base64 编码的字符串？根据文档，这是可能的：rawgit.com/MrRio/jsPDF/master/docs/module-addImage.html
我解决了。我将 canvasImg 代码放在 addImage 语法的正上方。

标签： javascript pdf canvas jspdf

【解决方案1】：

通过更改一些代码解决了它：

var doc = new jsPDF();

var rows = [];
for (var i = 0; i < dataFFTvalues.length; ++i) {
    for (var j = 0; j < dataFFTvalues[i].length; ++j) {
        dataFFTvalues[i][j] = dataFFTvalues[i][j];
    }
    rows.push(dataFFTvalues[i]); //.join(',')
}

var img = new Image();
img.src = 'http://domainname.com/portal/img/logo.png';

img.onload = function(){
    doc.setFontSize(15);
    doc.addImage(img, 'PNG', 160, 5, 40 , 18);
    doc.text(90, 20, "Report");
    doc.setFontSize(10);
    doc.text(15, 40, "Below are the metric details : ");

    doc.autoTable(columns, rows, {startY: 85}); 
    doc.addPage();
    doc.internal.scaleFactor = 1.8;
    var width = doc.internal.pageSize.width;   

    var canvas = document.getElementById('graph');
    var canvasImg = canvas.toDataURL();

    doc.addImage(canvasImg, 'PNG', 5, 20, width-20, 70);
    doc.save('FFTcanvas.pdf');
}

将画布图形代码放在 addImage() 的正上方并完美运行：

var canvas = document.getElementById('graph');
var canvasImg = canvas.toDataURL();
doc.addImage(canvasImg, 'PNG', 5, 20, width-20, 70);

谢谢。

【讨论】：