Javascript 赋能 PDF 生成—— HTML2canvas 和 jsPDF 携手共进

2023-10-03 14:55:26

前言

在信息泛滥的数字时代，人们对文档格式的需求日益多样化，而 PDF 格式凭借其跨平台兼容性、清晰的显示效果和强大的安全保障，已成为文档传输和保存的热门选择。作为一名前端开发人员，掌握 Javascript 将 HTML 转成 PDF 的技巧，可以极大提升工作效率和项目价值。

认识 HTML2Canvas 和 jsPDF

在 Javascript 的世界中，HTML2Canvas 和 jsPDF 是两颗耀眼的明星，它们携手合作，可以将 HTML 元素转化为图像数据，再利用 jsPDF 将图像数据转换为 PDF 文档，具体来说：

HTML2Canvas ：它是一个神奇的库，能够将 HTML 元素渲染成 Canvas 元素，就像艺术家用画笔描绘出图像一般。HTML2Canvas 兼容各种主流浏览器，如 Chrome、Firefox 和 Edge，使用起来非常方便。
jsPDF ：jsPDF 则是 PDF 文档生成器，它可以将 Canvas 元素或图像数据转换为 PDF 文档。jsPDF 提供了丰富的 API，允许开发人员自定义 PDF 文档的各种属性，如页面大小、页边距、字体和图像等。

实战演练：HTML2Canvas + jsPDF 实现网页转 PDF

为了加深理解，我们不妨亲自动手，使用 HTML2Canvas 和 jsPDF 来将网页内容转换成 PDF 文档：

1. 引入必要的库

首先，我们需要将 HTML2Canvas 和 jsPDF 库引入到我们的项目中，可以使用 CDN 方式，也可以通过 npm 包管理器进行安装。

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPDF/1.0.272/jspdf.min.js"></script>

2. 准备 HTML 内容

接下来，我们需要准备要转换的 HTML 内容，可以是任何有效的 HTML 代码，比如一段文本、一张图片或一个表格。为了便于演示，我们创建一个简单的 HTML 页面：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>这是标题</h1>
  <p>这是一段文字。</p>
  <img src="image.jpg" alt="图片">
</body>
</html>

3. 编写 Javascript 代码

现在，我们就可以编写 Javascript 代码来将 HTML 内容转换成 PDF 文档了：

// 获取 HTML 元素
const element = document.getElementById('content');

// 使用 HTML2Canvas 将 HTML 元素渲染成 Canvas 元素
html2canvas(element).then((canvas) => {
  // 使用 jsPDF 将 Canvas 元素转换为 PDF 文档
  const pdf = new jsPDF('p', 'pt', 'a4');
  pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 10, 10);
  pdf.save('output.pdf');
});