欢迎光临
我的个人博客网站

jsPDF 添加 中文字体 分页打印 移除空白页

jsPDF2.5版本 默认不支持utf-8的字体 具体看官方的说明,默认是不支持中文的。要使用中文需要自己添加字体。

1 将字体转换为base64编码 然后引入。也可以直接引入二进制文件,但没试过这个。
建议直接使用jsPFD源码里的 /fontconverter/fontconverter.html
jsPDF 添加 中文字体 分页打印 移除空白页

直接选择文件 点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> }  
赞(0) 打赏
未经允许不得转载:张拓的天空 » jsPDF 添加 中文字体 分页打印 移除空白页
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏