以下是一個使用 Vue.js 和 html2pdf 庫來生成 PDF 檔案的基本範例：
安裝 html2pdf 庫
npm install html2pdf.js
建立 Vue 組件
在 Vue 組件中，我們將有一個 button，當用戶單擊時，將生成 PDF 檔案。 以下是一個基本的 Vue 組件：
<template>
<div>
<button @click="generatePdf">生成PDF</button>
<div ref="contentToConvert">
<!-- 這裡是要轉換為PDF的內容 -->
<h1>VueHtml2pdf 範例</h1>
<p>這是一個使用Vue.js和html2pdf庫來生成PDF文件的範例。</p>
</div>
</div>
</template>
<script>
import html2pdf from "html2pdf.js";
export default {
methods: {
generatePdf() {
const content = this.$refs.contentToConvert;
const options = {
filename: "VueHtml2pdf_example.pdf",
image: { type: "jpeg", quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: "in", format: "letter", orientation: "portrait" },
};
html2pdf().set(options).from(content).save();
},
},
};
</script>
在這個組件中，我們將內容包裝在一個具有 ref 屬性的 div 中。 當用戶單擊生成 PDF 按鈕時，我們將通過 ref 屬性獲取內容，並使用 html2pdf 庫將其轉換為 PDF 檔案。
使用組件
現在，您可以將此 Vue 組件添加到您的應用程序中並使用它來生成 PDF 檔案。 例如，您可以在 App.vue 檔案中添加它：
<template>
<div id="app">
<VueHtml2pdfExample />
</div>
</template>
<script>
import VueHtml2pdfExample from "./components/VueHtml2pdfExample.vue";
export default {
components: {
VueHtml2pdfExample,
},
};
</script>
這樣，當用戶瀏覽您的應用程式時，他們將看到一個單擊生成 PDF 的按鈕，並且可以使用它來生成 PDF 版本的頁面內容。