使用 html2PDF 将内容导出为 PDF

将 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 文件。

所有项目的开始都是从安装依赖库开始：

css 复制代码

npm install --save html2pdf.js

VUE 项目通常是从一个 App.vue 文件开始：

xml 复制代码

<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，只需在项目中添加几行代码：

css 复制代码

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 文件完整代码：

xml 复制代码

<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 文档的简单应用程序的绝佳选择。