javascript - react - Convertir lienzo en PDF

pdf.js npm

Question

¿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?

Answer 1

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

Answer 2

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>

Answer 3

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/