jspdf中文亂碼的解決，包括普通text文本及autotable中文亂碼解決，超詳細！！！

直接使用jspdf導出效果：中文亂碼了

解決後：

前言：

jsPDF github位址

裡面有使用其他字型的介紹

具體步驟：

1.首先需要一個支援中文的字型ttf檔案，可以在網上下載下傳，也可以使用本地window/font/路徑下的檔案（選擇一個自己需要的），這個檔案将在步驟3中用到

2.下載下傳jspdf

方式1：使用指令

git clone https://github.com/MrRio/jsPDF.git

方式2：下載下傳zip檔案

3.下載下傳後找到fontconverter目錄中的fontconverter.html檔案：

在浏覽器中打開這個檔案，初始頁面為：

此時就要用到ttf檔案了，選擇步驟1提到的ttf檔案，（如果選擇本地window/font下面的檔案可能會提示沒有打開該檔案夾的權限，此時可以把需要的ttf檔案複制一份到其他路徑再上傳）上面的fontName會自動填充（也可以自定義名字，需要為小寫字母）

選擇ttf檔案後點選create：

将生成一個js檔案：

4.将生成的這個js檔案放入自己的項目中，具體路徑根據自己需要放置。生成js檔案内容為：

import { jsPDF } from "jspdf"
var font = 'AAEAAAAVA...'//隻截取了前幾個字元串
var callAddFont = function () {
this.addFileToVFS('simhei-normal.ttf', font);
this.addFont('simhei-normal.ttf', 'simhei', 'normal');
};
jsPDF.API.events.push(['addFonts', callAddFont])
           

5.在需要導出pdf的檔案中引入這個js檔案，（這裡是react+typescript項目；注意：在typescript項目中需要将檔案字尾名改為ts，否則引入後會報404的錯誤）

6.設定字型：

const doc = new jsPDF() as any;
doc.setFont('simhei');//simhei其實就是步驟1中的fontName,如果忘記了可以在生成的js中檢視
//表格中的設定
doc.autoTable({
		body: getData(data, headers),
		columns: headers,
		styles: {
			font: 'simhei', //字型，如果不配置，表格中的中文仍會亂碼
			textColor: [0, 0, 0],
		},
	})
           

示例：

import { jsPDF } from 'jspdf'
import 'jspdf-autotable'
import './simhei-normal'
function exportPDF(data, filename: string){
	const doc = new jsPDF() as any;
	doc.setFont('simhei')
	doc.autoTable({ body: [         
                { header1: '哈哈哈', header2: '嘿嘿嘿', header3: '啦啦啦' },
                { header1: '北京', header2: '上海', header3: '重慶' },
            ],
            columns: [      
                { header: '表頭1', dataKey: 'header1' },
                { header: '表頭2', dataKey: 'header2' },
                { header: '表頭3', dataKey: 'header3' },
            ],
            styles: { fillColor: [0, 0, 0], font: 'custom', textColor: [255,255,255] },  
     })    
	doc.save(`${filename}.pdf`);
}

           

7.完成

補充：如果不想或者無法通過引入上面的js檔案來實作，也可以将生成的js檔案的font字段内容提取出來直接使用

const font='AAA......'//提取的ttf的二進制編碼結果
const doc=new jsPDF()
doc.addFileToVFS("MyFont.ttf", font);//第一個參數名為自定義命名
doc.addFont("MyFont.ttf", "MyFont", "normal");//第二個參數為字型的名字，也是自命名，第三個參數統一為normal
doc.setFont('MyFont');//參數為字型名，這裡為上面新增的MyFont，如果想知道目前包含了字型可以通過doc.getFontList()檢視
           

最後：如果無法生成步驟3中的js檔案或者需要font字段的二進制字元串，可以留言，因為檔案較大不友善粘貼。