Vue 移动端项目：使用 HTML2Canvas + JsPDF 将 HTML 导出为 PDF 并打印

前端

2023-12-21 16:30:41

在 Vue 的移动端项目中，经常会遇到需要将 HTML 内容导出为 PDF 并进行打印的情况，例如导出报名表或考试卷。本文将介绍如何使用 HTML2Canvas 和 JsPDF 库来实现这一需求。

背景

移动端项目中，直接使用浏览器提供的打印功能会存在许多限制，例如无法控制打印布局、无法打印动态内容等。因此，需要借助其他库来实现自定义的打印功能。

HTML2Canvas

HTML2Canvas 是一个 JavaScript 库，可以将 HTML 元素转换为 Canvas 元素。Canvas 元素是一个位图，可以将 HTML 元素的视觉表现转换为图像数据。

JsPDF

JsPDF 是另一个 JavaScript 库，可以将 Canvas 元素或图像数据导出为 PDF 文件。

实现

1. 安装依赖项

npm install html2canvas jspdf --save

2. 导入库

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

3. 生成 PDF

const element = document.getElementById('element-to-export');

html2canvas(element).then((canvas) => {
  const pdf = new jsPDF();
  pdf.addImage(canvas.toDataURL('image/jpeg'), 'JPEG', 0, 0, canvas.width, canvas.height);
  pdf.save('filename.pdf');
});

4. 处理动态内容

如果需要导出包含动态内容的 HTML 元素，可以使用以下方法：

const element = document.getElementById('element-to-export');
const html = element.outerHTML;

html2canvas(html).then((canvas) => {
  const pdf = new jsPDF();
  pdf.addImage(canvas.toDataURL('image/jpeg'), 'JPEG', 0, 0, canvas.width, canvas.height);
  pdf.save('filename.pdf');
});