快捷導(dǎo)航

vue使用html2PDF實(shí)現(xiàn)將內(nèi)容導(dǎo)出為PDF

更新時(shí)間：2023年11月30日 10:54:24 作者：天行無(wú)忌

將 HTML 轉(zhuǎn)換為 PDF 進(jìn)行下載是一個(gè)比較常見(jiàn)的功能,這篇文章將通過(guò)html2PDF實(shí)現(xiàn)將頁(yè)面內(nèi)容導(dǎo)出為PDF,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

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

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

jsPDF
html2pdf
pdfmake
PDFsKit
ReLaXed
nodeice
Electron
PDFObject
pdf2json

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

Html2PDF 是創(chuàng)建報(bào)告并將其導(dǎo)出為 PDF 文件的最古老的組件，它基于使用外部 toolkit 包將任何屏幕直接打印到 PDF 文件。

所有項(xiàng)目的開(kāi)始都是從安裝依賴庫(kù)開(kāi)始：

npm install --save html2pdf.js

VUE 項(xiàng)目通常是從一個(gè) App.vue 文件開(kāi)始：

<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>

實(shí)例效果如下：

要生成 PDF，只需在項(xiàng)目中添加幾行代碼：

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ù)中定義了一個(gè)配置項(xiàng)對(duì)象。

Name	Type	Default	Description
margin	number or array	0	PDF 邊距（以 jsPDF 為單位）?？梢允菃蝹€(gè)數(shù)字，像CSS規(guī)則類(lèi)似 [vMargin, hMargin], or [top, left, bottom, right].
filename	string	'file.pdf'	導(dǎo)出的 PDF 的默認(rèn)文件名
pagebreak	object	{mode: ['css', 'legacy']}	控制頁(yè)面上的分頁(yè)行為
image	object	{type: 'jpeg', quality: 0.95}	用于生成 PDF 的圖像類(lèi)型和質(zhì)量
enableLinks	boolean	true	如果啟用，PDF 超鏈接會(huì)自動(dòng)添加到所有錨標(biāo)記之上
html2canvas	object	{ }	html2canvas 配置選項(xiàng)
jsPDF	object	{ }	jsPDF 配置選項(xiàng)

以下是一個(gè)簡(jiǎn)單的示例 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 可以快速、無(wú)縫地從 HTML 生成 PDF。它是構(gòu)建生成 PDF 文檔的簡(jiǎn)單應(yīng)用程序的絕佳選擇。

到此這篇關(guān)于vue使用html2PDF實(shí)現(xiàn)將內(nèi)容導(dǎo)出為PDF的文章就介紹到這了,更多相關(guān)vue html2PDF導(dǎo)出為PDF內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: