将 HTML 转换为 PDF 进行下载是一个比较常见的功能。过去要实现这个功能通常是放在服务端来实现，将文件生成好把链接发送给前端，让前端跳转进行下载。现在对于前端来说，使用库并写几行代码就可以简单的实现了。
前端 PDF 生成全部与浏览器的 API 调用有关，JavaScript 及其相关库使用这些 API 来完成任务。现在有很多 JavaScript 库使用，这里有个清单供参考：
- jsPDF
- html2pdf
- pdfmake
- PDFsKit
- ReLaXed
- nodeice
- Electron
- PDFObject
- pdf2json
本文跟大家分享其中一个库 html2pdf.js。在这里将结合使用它和 Vue3 从 HTML 生成 PDF 进行下载。
Html2PDF 是创建报告并将其导出为 PDF 文件的最古老的组件，它基于使用外部 toolkit 包将任何屏幕直接打印到 PDF 文件。
所有项目的开始都是从安装依赖库开始：
npm install --save html2pdf.js
VUE 项目通常是从一个 App.vue 文件开始：
<template> <div id="app" ref="document"> <div id="element-to-convert"> <center> <img width="400" src="./assets/constellation.png" /> </center> </div> </div> <button @click="downloadToPDF">Download to PDF</button> </template> <style> #app { margin-top: 60px; } </style>
实例效果如下：
要生成 PDF，只需在项目中添加几行代码：
const downloadToPDF = () => { const element = document.getElementById("element-order-detail"); const opt = { margin: 1, filename: "myfile.pdf", image: { type: "jpeg", quality: 0.98 }, html2canvas: { scale: 2 }, jsPDF: { unit: "in", format: "letter", orientation: "portrait", }, }; html2pdf().set(opt).from(element).save(); };
downloadToPDF 函数中定义了一个配置项对象。
| Name | Type | Default | Description |
| margin | number or array | 0 |
PDF 边距（以 jsPDF 为单位）。可以是单个数字，像CSS规则类似 [vMargin, hMargin], or [top, left, bottom, right]. |
| filename | string | 'file.pdf' |
导出的 PDF 的默认文件名 |
| pagebreak | object | {mode: ['css', 'legacy']} |
控制页面上的分页行为 |
| image | object | {type: 'jpeg', quality: 0.95} |
用于生成 PDF 的图像类型和质量 |
| enableLinks | boolean | true |
如果启用，PDF 超链接会自动添加到所有锚标记之上 |
| html2canvas | object | { } |
html2canvas 配置选项 |
| jsPDF | object | { } |
jsPDF 配置选项 |
以下是一个简单的示例 App.vue 文件完整代码：
<script> import html2pdf from "html2pdf.js"; import { defineComponent } from "vue"; const AppHome = defineComponent({ setup() { const downloadToPDF = () => { const element = document.getElementById("element-order-detail"); const opt = { margin: 1, filename: "myfile.pdf", image: { type: "jpeg", quality: 0.98 }, html2canvas: { scale: 2 }, jsPDF: { unit: "in", format: "letter", orientation: "portrait", }, }; html2pdf().set(opt).from(element).save(); }; return { downloadToPDF, }; }, }); export default AppHome; </script> <template> <div id="app" ref="document"> <div id="element-to-convert"> <center> <img width="400" src="./assets/constellation.png" /> </center> </div> <button @click="downloadToPDF">Download to PDF</button> </div> </template> <style> #app { margin-top: 60px; text-align: center; } </style>
总结
html2pdf.js 可以快速、无缝地从 HTML 生成 PDF。它是构建生成 PDF 文档的简单应用程序的绝佳选择。
