Converti canvas in PDF

Question

E 'possibile convertire direttamente canvas in pdf usando JavaScript (pdf.js o qualcosa del genere)?

C'è un altro modo possibile come ad esempio canvas to img e quindi img in pdf?

Potete farmi un esempio?

Answer 1

È possibile ottenere ciò utilizzando la libreria jsPDF e la funzione toDataURL.

Ho fatto una piccola dimostrazione:

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 2

Si prega di vedere https://github.com/joshua-gould/canvas2pdf. Questa libreria crea una rappresentazione PDF del tuo elemento canvas, a differenza delle altre soluzioni proposte che incorporano un'immagine in 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 3

Una soluzione migliore sarebbe utilizzando Kendo ui pareggio dom esportare in PDF-

Supponiamo che il seguente file HTML che contiene il tag 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> 

Ora, dopo che nello script annota quanto segue e sarà fatto:

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

E cioè, Scrivi qualsiasi cosa in quella tela e semplicemente premere quel pulsante di download tutto esportato in PDF. Ecco un link al Kendo UI - http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom e un blog per capire meglio l'intero processo - https://www.cronj.com/blog/export-htmlcss-pdf-using-javascript/