Konwersja płótna do formatu PDF

Question

Czy można bezpośrednio przekonwertować płótno na pdf przy użyciu JavaScript (pdf.js lub coś w tym stylu)?

Czy istnieje inny sposób, jak na przykład na płótnie, aby imgować, a następnie importować do pliku pdf?

Czy możesz dać mi przykład?

Answer 1

Można to osiągnąć, korzystając z biblioteki jsPDF i funkcji toDataURL.

Zrobiłem trochę demonstracji:

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

proszę zobaczyć https://github.com/joshua-gould/canvas2pdf. Ta biblioteka tworzy reprezentację PDF elementu canvas, w przeciwieństwie do innych proponowanych rozwiązań, które osadzają obraz w dokumencie 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

Lepszym rozwiązaniem byłoby przy użyciu Kendo UI remis DOM eksportować do PDF-

Załóżmy następujący plik HTML, który zawiera znacznik kanwie:

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

Teraz po tym w skrypcie zapisz następujące informacje i zostanie to zrobione:

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

I to jest to, Napisz rzecz na tym płótnie i po prostu naciśnij przycisk pobierania wszystkich wyeksportowanych do pliku PDF. Tu jest link do Kendo UI - http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom A blog, aby lepiej zrozumieć cały proces - https://www.cronj.com/blog/export-htmlcss-pdf-using-javascript/