解決 Html2pdf、jsPDF 內中文輸出變成亂碼

網路上雖然很多人有提供解法，不過還是寫一下自己最後實做的程式碼與過程，畢竟別人寫出來是一回事，真正實做的時候還是採了不少坑

html2pdf 這個套件內使用到的 jsPDF 本身不支援 UTF-8 中文的內文，也就是說下面這段輸出後會變成亂碼，那實際要上怎麼解決呢?

pdf.text('我是中文內容', x-position, y-position)

原本嘗試使用標楷體輸出，但輸出後會出現字體破碎的情況(字缺了一個邊或一個角)，還以為發生什麼慘案。所以後來找了Google開源的思源字體，缺點是檔案真的很大(20MB)

將下載下來的 .ttf 檔案拿到 jsPDF 提供的網站轉成 .js 檔案https://rawgit.com/MrRio/jsPDF/master/fontconverter/fontconverter.html

打開轉好的檔案會發現內容很貼心地幫我們打上了設定的內容(xxx為省略字)

import { jsPDF } from "jspdf"
var font = 'AAEAAAxxxxx...'
var callAddFont = function () {
  this.addFileToVFS('Taipeixxx.ttf', font);
  this.addFont('Taipeixxx.ttf', 'Taipeixxx', 'normal');
};
jsPDF.API.events.push(['addFonts', callAddFont])

但我想自己來，所以我把這個檔案的內容改成

const Taipeixxx = 'AAEAAAxxxxx...'

然後在我使用的 html 檔案寫

<script src="檔案位置/TaipeiSansTCBeta-normal.js"></script>

接著就是怎麼在 html2pdf 的過程中使用，請看下面

var element = document.getElementById('content')
var opt = { ... }
html2pdf().from(element).set(opt).toPdf().get('pdf').then(pdf => {
  // 先把字加入字庫
  pdf.addFileToVFS('TaipeiSansTCBeta-normal', TaipeiSansTCBeta);
  pdf.addFont('TaipeiSansTCBeta-normal', 'TaipeiSansTCBeta', 'normal');
  // 設定輸出時的字體
  pdf.setFont('TaipeiSansTCBeta');
  pdf.text('我是中文內容', x-position, y-position)
}).save()

這樣一來就可以正常輸出中文啦