JavaScript 如何将 canvas 转换为 PDF

在将 HTML Canvas 转换为PDF格式时，我们通常会使用 JavaScript 库 jsPDF。这个库提供了一种简便的方法来生成PDF文件，并支持将Canvas的内容添加到PDF中。以下是使用 jsPDF 将Canvas转换为PDF的基本步骤：

第一步：引入jsPDF库

首先，确保在你的项目中包含了 jsPDF 库。你可以通过CDN链接来引入它：

html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>

第二步：创建Canvas并绘制内容

假设你已经在HTML中设置了一个Canvas元素，例如：

html
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

接下来，使用JavaScript在Canvas上绘制一些内容：

javascript
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "20px Arial";
ctx.fillText("Hello World", 50, 50);

第三步：使用jsPDF将Canvas转换为PDF

接下来，创建一个新的 jsPDF 实例，并使用 addImage 方法将Canvas的内容添加到PDF文档中：

javascript
var doc = new jspdf.jsPDF();

// 将Canvas转换为DataURL
var canvasImg = canvas.toDataURL("image/jpeg", 1.0);

// 将图像添加到PDF
doc.addImage(canvasImg, 'JPEG', 10, 10, 180, 90);

// 保存生成的PDF
doc.save("download.pdf");

这里我们首先将 Canvas 转换为JPEG格式的图像（也可以选择其他格式，比如PNG），然后使用 addImage 方法将这个图像添加到PDF中。在 addImage 方法中，我们指定了图像的格式、在PDF中的位置和大小。

示例

假设我们有一个绘图应用，用户在网页上的Canvas中绘制图像。用户完成绘图后，可以点击一个按钮，调用上述脚本将他们的作品保存为PDF文件。这为用户提供了一种方便的方式来导出他们的绘图成果。

注意事项

• 确保在使用 toDataURL 方法之前，Canvas上的内容已经完全绘制完成。
• 生成的PDF文档的质量可以通过调整 toDataURL 方法的第二个参数来控制。
• jsPDF 也支持多种PDF页面格式和方向，你可以在创建 jsPDF 实例时设置这些参数。

使用 jsPDF 将Canvas内容转成PDF是一种非常方便的方式，可以应用于各种需要将图形内容导出为PDF文件的场景，如在线报告生成、图形设计应用等。