visor react page ejemplo chrome javascript canvas pdf-generation

javascript - react - Convertir lienzo en PDF



pdf.js npm (3)

Por favor, consulte https://github.com/joshua-gould/canvas2pdf . Esta biblioteca crea una representación en PDF de su elemento canvas, a diferencia de las otras soluciones propuestas que incrustan una imagen en un documento PDF.

//Create a new PDF canvas context. var ctx = new canvas2pdf.Context(blobStream()); //draw your canvas like you would normally ctx.fillStyle=''yellow''; ctx.fillRect(100,100,100,100); // more canvas drawing, etc... //convert your PDF to a Blob and save to file ctx.stream.on(''finish'', function () { var blob = ctx.stream.toBlob(''application/pdf''); saveAs(blob, ''example.pdf'', true); }); ctx.end();

¿Es posible convertir directamente canvas a pdf usando JavaScript ( pdf.js o algo así)?

¿Hay alguna otra manera posible como canvas para img y luego img para pdf?

¿Puedes darme un ejemplo?


Puede lograr esto utilizando la biblioteca jsPDF y la función toDataURL .

Hice una pequeña demostración:

var canvas = document.getElementById(''myCanvas''); var context = canvas.getContext(''2d''); // draw a blue cloud context.beginPath(); context.moveTo(170, 80); context.bezierCurveTo(130, 100, 130, 150, 230, 150); context.bezierCurveTo(250, 180, 320, 180, 340, 150); context.bezierCurveTo(420, 150, 420, 120, 390, 100); context.bezierCurveTo(430, 40, 370, 30, 340, 50); context.bezierCurveTo(320, 5, 250, 20, 250, 50); context.bezierCurveTo(200, 5, 150, 20, 170, 80); context.closePath(); context.lineWidth = 5; context.fillStyle = ''#8ED6FF''; context.fill(); context.strokeStyle = ''#0000ff''; context.stroke(); download.addEventListener("click", function() { // only jpeg is supported by jsPDF var imgData = canvas.toDataURL("image/jpeg", 1.0); var pdf = new jsPDF(); pdf.addImage(imgData, ''JPEG'', 0, 0); pdf.save("download.pdf"); }, false);

<script src="//cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script> <canvas id="myCanvas" width="578" height="200"></canvas> <button id="download">download</button>


Una mejor solución sería usar Kendo ui draw dom para exportar a pdf-

Supongamos que el siguiente archivo html que contiene la etiqueta canvas:

<script src="http://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script> <script type="x/kendo-template" id="page-template"> <div class="page-template"> <div class="header"> </div> <div class="footer" style="text-align: center"> <h2> #:pageNum# </h2> </div> </div> </script> <canvas id="myCanvas" width="500" height="500"></canvas> <button onclick="ExportPdf()">download</button>

Ahora, después de eso, en su script, escriba lo siguiente y se hará:

function ExportPdf(){ kendo.drawing .drawDOM("#myCanvas", { forcePageBreak: ".page-break", paperSize: "A4", margin: { top: "1cm", bottom: "1cm" }, scale: 0.8, height: 500, template: $("#page-template").html(), keepTogether: ".prevent-split" }) .then(function(group){ kendo.drawing.pdf.saveAs(group, "Exported_Itinerary.pdf") }); }

Y eso es todo, escriba cualquier cosa en ese lienzo y simplemente presione ese botón de descarga, todo exportado a PDF. Aquí hay un enlace a Kendo UI - http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom Y un blog para comprender mejor todo el proceso - https://www.cronj.com/blog/export-htmlcss-pdf-using-javascript/