Convert canvas to PDF

Question

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

User · Accepted Answer

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

I made a little demonstration:

_x000D_

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

_x000D_

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

_x000D_

User · Answer

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

User · Answer

A better solution would be using Kendo ui draw dom to export to pdf-  Suppose the following html file which contains the canvas tag    lt script src  http   kendo cdn telerik com 2017 2 621 js kendo all min js  gt  lt  script gt        lt script type  x kendo-template  id  page-template  gt        lt div class  page-template  gt               lt div class  header  gt                lt  div gt               lt div class  footer  style  text-align  center  gt                    lt h2 gt    pageNum   lt  h2 gt               lt  div gt         lt  div gt       lt  script gt       lt canvas id  myCanvas  width  500  height  500  gt  lt  canvas gt       lt button onclick  ExportPdf    gt download lt  button gt    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

User · Answer

So for today  jspdf-1 5 3  To answer the question of having the pdf file page exactly same as the canvas  After many tries of different combinations  I figured you gotta do something like this  We first need to set the height and width for the output pdf file with correct orientation  otherwise the sides might be cut off  Then we get the dimensions from the  pdf  file itself  if you tried to use the canvas s dimensions  the sides might be cut off again  I am not sure why that happens  my best guess is the jsPDF convert the dimensions in other units in the library        Download button       download-image   on  click   function          let width     CANVAS width       let height     CANVAS height         set the orientation     if width  gt  height         pdf   new jsPDF  l    px    width  height              else        pdf   new jsPDF  p    px    height  width                then we get the dimensions from the  pdf  file itself     width   pdf internal pageSize getWidth        height   pdf internal pageSize getHeight        pdf addImage   CANVAS   PNG   0  0 width height       pdf save  download pdf            Learnt about switching orientations from here  https   github com MrRio jsPDF issues 476

[javascript] Convert canvas to PDF

Examples related to javascript

Examples related to canvas

Examples related to pdf-generation