Ein leerer PDF-Bericht wird generiert, wenn wir mehrere Diagramme mit html2canvas und der jsPDF-Bibliothek haben.

Ich habe zwei Flottendiagramme auf einer Seite, und mit dem folgenden Code möchte ich jsPDF verwenden, um einen Bericht davon auf zwei verschiedenen Seiten (aber einer PD-Datei) zu erstelle

function flot1() {
        var oilPrices = [[1167692400000, 61.05], [1167778800000, 58.32], [1167865200000, 57.35], [1167951600000, 56.31], [1168210800000, 55.55], [1168297200000, 55.64]
            , [1168383600000, 54.02], [1168470000000, 51.88], [1168556400000, 52.99], [1168815600000, 52.99], [1168902000000, 51.21], [1168988400000, 52.24], [1169074800000, 50.48]];

        var exchangeRates = [[1167606000000, 0.7580], [1167692400000, 0.7580], [1167778800000, 0.75470], [1167865200000, 0.75490], [1167951600000, 0.76130], [1168038000000, 0.76550],
            [1168124400000, 0.76930], [1168210800000, 0.76940], [1168297200000, 0.76880], [1168383600000, 0.76780], [1168470000000, 0.77080], [1168556400000, 0.77270],
            [1168642800000, 0.77490], [1168729200000, 0.77410], [1168815600000, 0.77410], [1168902000000, 0.77320], [1168988400000, 0.77270], [1169074800000, 0.77370],
            [1169161200000, 0.77240], [1169247600000, 0.77120]];

        var data = [
            { data: oilPrices, label: "Oil price ($)" },
            { data: exchangeRates, label: "USD/EUR exchange rate", yaxis: 2 }
        ];

        var options = {
            canvas: true,
            xaxes: [{ mode: "time" }],
            yaxes: [{ min: 0 }, {
                position: "right",
                alignTicksWithAxis: 1,
                tickFormatter: function (value, axis) {
                    return value.toFixed(axis.tickDecimals) + "€";
                }
            }],
            legend: { position: "sw" }
        }

        plot = $.plot("#placeholder_2", data, options);
    }

    function flot2() {
        plot = $.plot($("#placeholder"), [{ label: 'Test', data: [[0, 0], [1, 1]] }], { yaxis: { max: 1 } });
    }

var doc = new jsPDF();
html2canvas($("#placeholder").get(0), {
    onrendered: function (canvas) {
         var imgData = canvas.toDataURL('image/png');
         doc.addImage(imgData, 'PNG', 10, 10, 180, 115);
              }
            });

var element = $("#placeholder_2").get(0);
html2canvas(element, {
    onrendered: function (canvas2) {
         var imgData2 = canvas2.toDataURL('image/png');
         doc.addPage()
         doc.addImage(imgData2, 'PNG', 10, 10, 180, 60);
              }
           });

doc.save('sample-file.pdf');

das Problem ist

wenn ich pdf mit @ speicheEINEgraph, es funktioniert einwandfrei, aber nach dem Einfügen von doc.save () am Ende des Canvas-Renderings ist die erstellte PDF-Datei leer.

HINWEIS: Ich benutze html2canvas und jsPDF Bibliotheken.

Antworten auf die Frage(2)

Ihre Antwort auf die Frage