Convert canvas to PDF

问题:

Is it possible to directly convert canvas to pdf using JavaScript (pdf.js or something like that)?

Is there another possible way like canvas to img and then img to pdf?

Can you give me an example?

回答1:

You can achieve this by utilizing the jsPDF library and the toDataURL function.

I made a little demonstration:

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>

回答2:

Please see https://github.com/joshua-gould/canvas2pdf. This library creates a PDF representation of your canvas element, unlike the other proposed solutions which embed an image in a PDF document.

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

回答3:

A better solution would be using Kendo ui draw dom to export to pdf-

Suppose the following html file which contains the canvas tag:

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

Now after that in your script write down the following and it will be done:

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")     }); } 

And that is it, Write anything in that canvas and simply press that download button all exported into PDF. Here is a link to Kendo UI - http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom And a blog to better understand the whole process - https://www.cronj.com/blog/export-htmlcss-pdf-using-javascript/

文章来源: Convert canvas to PDF