Export Table to PDF:Vue3 表格輸出成PDF|jsPdf, jsPdf-autotable
Published in
5 min readNov 27, 2023
本來用一個套件,他可以取得html的ID,然後把內容截圖存成PDF,勉強符合合約內容,但PM希望我弄更好一點。
Export Table to docx:Vue3 表格輸出成word
Export Table to Excel:Vue3 表格輸出成Excel
安裝
npm install jspdf jspdf-autotable
引入
import jsPDF from "jspdf";
import autoTable from "jspdf-autotable";
建立文件,headers跟body的格式都是陣列:
const doc = new jsPDF()
const headers = [['Name', 'Email', 'Country']], // 注意有兩層[]
const body = [
['David', 'david@example.com', 'Sweden'],
['Castille', 'castille@example.com', 'Spain']
]
autoTable(doc, {
head: headers,
body,
});
doc.save('example.pdf');
但如果是非英語系的話就會出現亂碼,這時候就要下載字形檔來解決,我使用的是google font,選定要用的字形並下載:
解壓縮後得到ttf
檔:
js-pdf這個套件提供一個網站,可以將ttf
檔轉成js
檔
回到vue中,引入這個字形js
檔
import '../../language/NotoSansTC'
字形檔內容如下:
import { jsPDF } from "jspdf"
var font = 'AAEAAAAWA.....'
// 滑至最下層,可以看到自動生成的function
var callAddFont = function () {
this.addFileToVFS('NotoSansTC-VariableFont_wght-normal.ttf', font);
this.addFont('NotoSansTC-VariableFont_wght-normal.ttf', 'NotoSansTC-VariableFont_wght', 'normal');
};
jsPDF.API.events.push(['addFonts', callAddFont])
vue中增加字形檔設定
doc.setFont('NotoSansTC-VariableFont_wght','normal'); // 跟字形檔addFont那邊一致的名稱
autoTable(doc, {
head: headers,
body,
styles: {
font: 'NotoSansTC-VariableFont_wght'
}
});
doc.save('example.pdf');
這樣就可以嚕
加上頁碼
根據文件,autoTable有給一個屬性,可以取得所有資料總共有幾頁
didDrawCell: (data) => {
console.log(data.pageNumber);
},
將data.pageNumber
提取出來,並代入迴圈:
for (let i = 0; i < pageNumber; i++) {
doc.setPage(i);
let pageCurrent = doc.internal.getCurrentPageInfo().pageNumber; //現在這頁
doc.setFontSize(12); //設定字體大小(optional)
doc.text(
`${pageCurrent} / ${pageNumber}`,
190,
doc.internal.pageSize.height - 10,
{align: 'left'}
);
}
doc.text
的參數(文字, x, y, optional)
可以透過doc.internal.pageSize.width
來取得頁面寬度,再看你要往右推多少過去,預設align是left,這點也要考慮進去,搞不清楚就多試幾次就會放到對的位置了。
這樣就可以將頁碼印在輸出的pdf上了。