- A+
所属分类：Web前端
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; if(onlyFirstPage){ //只打印第一页 do{ for (var i =2; i <= pCount; i++) { console.log(i) pdf1.deletePage(i) } pCount = pdf1.getNumberOfPages() }while(pCount >1) }else{ //打印指定页数 超过的删除 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> } 
