将画布转换为 PDF [英] Convert canvas to PDF

问题描述

是否可以使用 JavaScript 直接将画布转换为 pdf (pdf.js 或类似的东西)?

有没有另一种可能的方式，比如画布到 img 然后 img 到 pdf?

你能举个例子吗?

解决方案

您可以通过使用 jsPDF 库和 toDataURL 函数.>

我做了一个小示范:

var canvas = document.getElementById('myCanvas');var context = canvas.getContext('2d');//绘制蓝云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.strokeStyle = '#0000ff';上下文中风()；下载.addEventListener(点击"，函数(){//jsPDF 只支持 jpegvar imgData = canvas.toDataURL("image/jpeg", 1.0);var pdf = 新的 jsPDF();pdf.addImage(imgData, 'JPEG', 0, 0);pdf.save("下载.pdf");}, false);

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

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?

解决方案

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>

这篇关于将画布转换为 PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！