Export Table to PDF：Vue3 表格輸出成PDF｜jsPdf, jsPdf-autotable

本來用一個套件，他可以取得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檔

選擇檔案後create

回到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上了。

參考資料
https://www.npmjs.com/package/jspdf-autotable
https://stackoverflow.com/questions/35063330/how-to-align-text-in-center-using-jspdf

輸出成其他格式
Export Table to docx：Vue3 表格輸出成word
Export Table to Excel：Vue3 表格輸出成Excel