jsPDF2.5版本 默認不支持utf-8的字體 具體看官方的說明，默認是不支持中文的。要使用中文需要自己添加字體。
1 將字體轉換為base64編碼 然后引入。也可以直接引入二進制文件，但沒試過這個。
建議直接使用jsPFD源碼里的 /fontconverter/fontconverter.html
直接選擇文件 點create
會生成一個導入字體的 js腳本 如果不是用的 module 方式引入js的 需要稍作修改。
注意事項
1字體文件不要太龐大 例如15M以上。太大會導致內存溢出錯誤。
2選的字體一定要包含你要用的字 否則就會顯示空白 或者亂碼。
比如 你頁面上 有個字：中，在你的字體文件里面沒有這個字形，那就會導致 出現中的地方都是空白或亂碼。
3並不是所有的字體都能正常工作，這里我使用了方正黑體 和 NotoSansCJKtc-Regular
2 頁面上引入這個字體，並將該字體設置為默認字體
如果你是用jsPDF.html()方法生成pdf的 這一步很重要
3 在要使用字體之前 設置字體
點擊查看代碼
var pdf = new jsPDF('l', 'pt');
pdf.setFont("fzht"); // set font
pdf.text(10, 10, '歡迎訪問 hangge.com');
具體代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>Html2Pdf</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="examples.css">
<style>
@font-face {
font-family: 'fzht';
font-display: swap;
src: url('./fonts/fzht.ttf') format('truetype')
}
body,
button,
#html {
font-family: fzht;
}
table td {
border: 1px solid silver;
padding: 3px;
}
</style>
</head>
<body>
<div id="html">
<i>你好nihao</i>
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
</ul>
<h1>Tables</h1>
<table class='table2'>
<tr>
<td>項目</td>
<td>花費</td>
<td>說明</td>
<td>Available</td>
</tr>
<tr>
<td>牛奶</td>
<td>$1.00</td>
<td>Hello PDF World你好PDF</td>
<td>Out Of Stock</td>
</tr>
<tr>
<td>Milk</td>
<td>$1.00</td>
<td>Hello PDF World</td>
<td>Out Of Stock</td>
</tr>
</table>
<button onclick="printPDF();" type="button">打印</button>
</div>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script src='../../dist/jspdf.umd.js'></script>
<script src='./fonts/fzht-normal.js'></script>
<script>
//fzht-normal.js
(function () {
return
let { jsPDF } = jspdf;
var callAddFont = function () {
var font = '一長串base64編碼'
this.addFileToVFS('fzht-normal.ttf', font);
this.addFont('fzht-normal.ttf', 'fzht', 'normal');
};
jsPDF.API.events.push(['addFonts', callAddFont])
})();
</script>
<script>
var canPrint = false;
const { jsPDF } = jspdf
var pdf = new jsPDF({
orientation: "l",//l 橫向 p 縱向
unit: "px",//這個單位設置了也沒啥左右 好像一直都是用的px
hotfixes: ["px_scaling"],
format: [925.44, 357.5],// 紙張大小 默認a4 可選a0-a10 或者數組[寬,高] 單位好像一直是px
putOnlyUsedFonts: true,
});
//通過pageCount 指定要打印幾頁
function printPDF(onlyFirstPage=true,pageCount=1) {
pdf.setFont("fzht"); // set font html頁面上也要設置字體 否則無效
//html轉pdf 還是先把html轉圖片 再轉pdf
//超出pdf頁面大小的部分 將不會顯示
//打印預覽頁面調整橫向 縱向 會自動縮放
pdf.html(printElement, {
callback: function (pdf1) {
//成功回調
//如果要添加中文 需要重新設置字體
//pdf.setFont("fzht"); // set font
//pdf1.text(10, 10, '歡迎訪問 hangge.com');
//保證只留第一頁
var pCount = pdf1.getNumberOfPages()
if(pageCount<1)pageCount=1;
//打印指定頁數 超過的刪除
while(pCount>pageCount){
for (var i = pageCount+1; i <= pCount; i++) {
console.log(i)
pdf1.deletePage(i)
}
pCount = pdf1.getNumberOfPages()
}
pdf1.autoPrint();// 直接打印 不顯示預覽頁 好像沒用 還是有預覽頁面
//pdf1.autoPrint();//當在頁面中打開pdf時候 直接打印 沒有被打開過就不會彈出打印
var iframe = document.getElementById('printframe');
iframe.src = pdf1.output('bloburl');
}
});
}
</script>
</body>
</html>
自動分頁打印
<style>
#html {
height: auto;
font-family: fzht;
width: 241mm;
background-color: #fff;
overflow: hidden;
}
.print-page {
height: 92mm;
width: 241mm;
overflow: hidden;
}
</style>
<div id="html">
@{
//每頁的內容條數固定
//這樣能算出來指定的內容需要打印幾頁
//打印完畢后 移除多余的頁面 就可以保證沒有空白頁
var startIndex = 0;
var page= 0;
while (startIndex < Model.ApplyItem.Count)
{
var items = Model.ApplyItem.Skip(startIndex).Take(6);
startIndex += 6;
page++;
<div class="print-page">
<table class="tborder">
@foreach (var item in items)
{
<tr>
<td>@item.StoreHouseName</td>
<td>@item.Memo</td>
</tr>
}
</table>
</div>
}
}
</div>
@section js{
<script>
printPDF(false,@(page));
</script>
}