# 在Vue專案中直接生成PDF 需使用到兩個套件。 1. jspdf 2. html2canvas 以npm為例安裝套件 ```bash npm install jspdf --save npm install html2canvas --save ``` ## 建立想要轉換的html並使用ref抓取DOM物件 ```vue ``` ## 將html DOM物件生成canvas，再由canvas轉換為pdf圖片。範例函式： ```js //~/utils/exportPdf import { jsPDF } from "jspdf"; import html2Canvas from "html2canvas"; export const generatePdf = async (dom) => { const canvas = await html2Canvas(dom, { allowTaint: true, }); //内容的寬度與高度 let canvasWidth = canvas.width; let canvasHeight = canvas.height; //html生成的canvas高度,a4尺寸[595.28,841.89]; let pageHeight = (canvasWidth / 592.28) * 841.89; let imgWidth = 595.28; let imgHeight = (592.28 / canvasWidth) * canvasHeight; //canvas轉圖片 let pageData = canvas.toDataURL("image/jpeg", 1.0); //建立jsPDF物件 let PDF = new jsPDF("", "pt", "a4"); //jsPDF物件加入剛剛轉換的canvas if (canvasHeight < pageHeight) { PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight); } else { //分頁 while (canvasHeight > 0) { PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight); canvasHeight -= pageHeight; position -= 841.89; if (canvasHeight > 0) { PDF.addPage(); } } } //保存文件 PDF.save("我的PDF.pdf"); }; ``` ## 引入剛剛的函式並建立按鈕觸發完整程式範例: `app.vue` ```vue ``` `~/utils/exportPdf` ```js import { jsPDF } from "jspdf"; import html2Canvas from "html2canvas"; export const generatePdf = async (dom) => { const canvas = await html2Canvas(dom, { allowTaint: true, }); //内容的寬度與高度 let canvasWidth = canvas.width; let canvasHeight = canvas.height; //html生成的canvas高度,a4尺寸[595.28,841.89]; let pageHeight = (canvasWidth / 592.28) * 841.89; let imgWidth = 595.28; let imgHeight = (592.28 / canvasWidth) * canvasHeight; //canvas轉圖片 let pageData = canvas.toDataURL("image/jpeg", 1.0); //建立jsPDF物件 let PDF = new jsPDF("", "pt", "a4"); //jsPDF物件加入剛剛轉換的canvas if (canvasHeight < pageHeight) { PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight); } else { //分頁 while (canvasHeight > 0) { PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight); canvasHeight -= pageHeight; position -= 841.89; if (canvasHeight > 0) { PDF.addPage(); } } } //保存文件 PDF.save("我的PDF.pdf"); }; ```

如何在Vue專案中生成PDF