使用 html2PDF 将内容导出为 PDF

使用 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 文件。

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

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>

实例效果如下:

Html2PDF 导出效果图

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

 

Html2PDFvue