使用 JSPDF 將畫布圖表導出為 PDF

Question

我正在使用 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，iVBORw0KGgoAAAANSUhEUgAABQkAAAG2CAYAAADcLQBGAAAgAElEQVR4Xu3YQREAAAjDMObfNEIaHJDbqztHgAABAgQIECBAgAABAgQIECBAgEBaYnvPU+......

期待建議和幫助。

Answer 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);

謝謝你。