Seite mit mehreren chart.js Diagrammen zu pdf

Ich habe chart.js verwendet, um eine Berichtsseite mit mehreren Diagrammen zu erstellen. Ich muss diesen Bericht in PDF exportieren. Es gibt viele Lösungen über die Suche, aber ich kann keine finden, die mehrere Canvas-Elemente hat.Seite mit mehreren chart.js Diagrammen zu pdf

Die einzige verfügbare Lösung scheint zu sein, alle Bilder zu durchlaufen, den Bericht mit den Bildern neu zu erstellen und dann als PDF herunterzuladen.

Gibt es einen einfacheren/effizienteren Weg, dies zu erreichen?

<body> 
<h1> Chart 1 </h1> 
<div style="width:800px; height:400px;"> 
<canvas id="chart_1" width="50" height="50"></canvas> 
</div> 

<h1> Chart 2 </h1> 
<div style="width:800px; height:400px;"> 
<canvas id="chart_2" width="50" height="50"></canvas> 
</div> 

<h1> Chart 3 </h1> 
<div style="width:800px; height:400px;"> 
<canvas id="chart_3" width="50" height="50"></canvas> 
</div> 
</body>

Quelle

2017-03-31 Sainath Krishnan

Ehrlich gesagt, scheint es, wie der einfachste Ansatz wäre, nur einen „Download PDF“ Link zur Verfügung stellen, die der Druckseite des Browsers erscheint und Benutzer anweisen, „Druck als PDF“ zu wählen.

Wenn dieser Ansatz für Sie (oder Ihre Benutzer) nicht funktioniert, dann ist hier ein grober Weg, es zu tun.

Grundsätzlich erstellen wir ein neues canvas-Element, das die Größe Ihrer Berichtsseite hat, und zeichnen schrittweise die Pixel aus Ihren vorhandenen chart.js canvas-Diagrammen in das neue canvas. Sobald das erledigt ist, können Sie jsPDF verwenden, um die neue Leinwand zu einem PDF-Dokument als Bild hinzuzufügen und die Datei herunterzuladen.

Hier ist eine Beispielimplementierung, die genau das tut.

$('#downloadPdf').click(function(event) { 
    // get size of report page 
    var reportPageHeight = $('#reportPage').innerHeight(); 
    var reportPageWidth = $('#reportPage').innerWidth(); 

    // create a new canvas object that we will populate with all other canvas objects 
    var pdfCanvas = $('<canvas />').attr({ 
    id: "canvaspdf", 
    width: reportPageWidth, 
    height: reportPageHeight 
    }); 

    // keep track canvas position 
    var pdfctx = $(pdfCanvas)[0].getContext('2d'); 
    var pdfctxX = 0; 
    var pdfctxY = 0; 
    var buffer = 100; 

    // for each chart.js chart 
    $("canvas").each(function(index) { 
    // get the chart height/width 
    var canvasHeight = $(this).innerHeight(); 
    var canvasWidth = $(this).innerWidth(); 

    // draw the chart into the new canvas 
    pdfctx.drawImage($(this)[0], pdfctxX, pdfctxY, canvasWidth, canvasHeight); 
    pdfctxX += canvasWidth + buffer; 

    // our report page is in a grid pattern so replicate that in the new canvas 
    if (index % 2 === 1) { 
     pdfctxX = 0; 
     pdfctxY += canvasHeight + buffer; 
    } 
    }); 

    // create new pdf and add our new canvas as an image 
    var pdf = new jsPDF('l', 'pt', [reportPageWidth, reportPageHeight]); 
    pdf.addImage($(pdfCanvas)[0], 'PNG', 0, 0); 

    // download the pdf 
    pdf.save('filename.pdf'); 
});

Sie können es in Aktion bei dieser codepen sehen.

Jetzt lasst uns über einige Probleme mit diesem Ansatz sprechen. Zuerst müssen Sie die Position jedes chart.js canvas im neuen Objekt canvas steuern. Die einzige Möglichkeit, dies zu tun, besteht darin, zu verstehen, wie Ihre Berichtsseite strukturiert ist, und dieselbe Struktur zu implementieren. In meinem Beispiel sind meine Diagramme in einem 2x2-Raster und die Logik behandelt dies entsprechend. Wenn Sie ein 3x2-Raster oder etwas anderes hätten, müssten Sie die Positionierungslogik ändern.

Schließlich sind die endgültigen PDF-Ausgabedatei Dimensionen viel größer als die ursprüngliche Diagrammseite (aus dem Web). Ich denke, der Grund ist, weil mein Diagramm "Container" Div über die ganze Seite erstreckt. Daher möchten Sie wahrscheinlich einen anderen Ansatz zum Festlegen der Größe Ihres neuen canvas verwenden.

Kurz gesagt, das obige Beispiel soll einen Ansatz demonstrieren und nicht Ihre endgültige Lösung sein.

Viel Glück!

Quelle

2017-03-31 16:10:37 jordanwillis

Danke zum Beispiel. Es funktioniert perfekt. Wie Sie mehr Seiten hinzufügen, wenn der Inhalt mehr ist. Bitte hilf mir. – VSK

Seite mit mehreren chart.js Diagrammen zu pdf

Antwort

Verwandte Themen