vue使用html2PDF實現將內容導出為PDF

更新時間：2023年11月30日 10:54:24 作者：天行無忌

將 HTML 轉換為 PDF 進行下載是一個比較常見的功能,這篇文章將通過html2PDF實現將頁面內容導出為PDF,感興趣的小伙伴可以跟隨小編一起學習一下

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

前端 PDF 生成全部與瀏覽器的 API 調用有關，JavaScript 及其相關庫使用這些 API 來完成任務?，F在有很多 JavaScript 庫使用，這里有個清單供參考：

jsPDF
html2pdf
pdfmake
PDFsKit
ReLaXed
nodeice
Electron
PDFObject
pdf2json

本文跟大家分享其中一個庫 html2pdf.js。在這里將結合使用它和 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 函數中定義了一個配置項對象。

Name	Type	Default	Description
margin	number or array	0	PDF 邊距（以 jsPDF 為單位）。可以是單個數字，像CSS規(guī)則類似 [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 文檔的簡單應用程序的絕佳選擇。

到此這篇關于vue使用html2PDF實現將內容導出為PDF的文章就介紹到這了,更多相關vue html2PDF導出為PDF內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: