將 HTML 轉(zhuǎn)換為 PDF 進行下載是一個比較常見的功能。過去要實現(xiàn)這個功能通常是放在服務(wù)端來實現(xiàn)，將文件生成好把鏈接發(fā)送給前端，讓前端跳轉(zhuǎn)進行下載。現(xiàn)在對于前端來說，使用庫并寫幾行代碼就可以簡單的實現(xiàn)了。

前端 PDF 生成全部與瀏覽器的 API 調(diào)用有關(guān)，JavaScript 及其相關(guān)庫使用這些 API 來完成任務(wù)。現(xiàn)在有很多 JavaScript 庫使用，這里有個清單供參考：

• jsPDF
• html2pdf
• pdfmake
• PDFsKit
• ReLaXed
• nodeice
• Electron
• PDFObject
• pdf2json

本文跟大家分享其中一個庫 html2pdf.js。在這里將結(jié)合使用它和 Vue3 從 HTML 生成 PDF 進行下載。

Html2PDF 是創(chuàng)建報告并將其導出為 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 函數(shù)中定義了一個配置項對象。

以下是一個簡單的示例 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>

總結(jié)

html2pdf.js 可以快速、無縫地從 HTML 生成 PDF。它是構(gòu)建生成 PDF 文檔的簡單應(yīng)用程序的絕佳選擇。