经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
jsPDF 添加 中文字体 分页打印 移除空白页
来源:cnblogs  作者:码农白里黑  时间:2022/1/17 11:05:08  对本文有异议

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 在要使用字体之前 设置字体

点击查看代码
  1. var pdf = new jsPDF('l', 'pt');
  2. pdf.setFont("fzht"); // set font
  3. pdf.text(10, 10, '欢迎访问 hangge.com');

具体代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Html2Pdf</title>
  5.     <meta charset="utf-8">
  6.     <link rel="stylesheet" type="text/css" href="examples.css">
  7.     <style>
  8.         @font-face {
  9.             font-family: 'fzht';
  10.             font-display: swap;
  11.             src: url('./fonts/fzht.ttf') format('truetype')
  12.         }
  13.         body,
  14.         button,
  15.         #html {
  16.             font-family: fzht;
  17.         }
  18.         table td {
  19.             border: 1px solid silver;
  20.             padding: 3px;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div id="html">
  26.         <i>你好nihao</i>
  27.         <ul>
  28.             <li></li>
  29.             <li></li>
  30.             <li></li>
  31.             <li></li>
  32.         </ul>
  33.         <h1>Tables</h1>
  34.         <table class='table2'>
  35.             <tr>
  36.                 <td>项目</td>
  37.                 <td>花费</td>
  38.                 <td>说明</td>
  39.                 <td>Available</td>
  40.             </tr>
  41.             <tr>
  42.                 <td>牛奶</td>
  43.                 <td>$1.00</td>
  44.                 <td>Hello PDF World你好PDF</td>
  45.                 <td>Out Of Stock</td>
  46.             </tr>
  47.             <tr>
  48.                 <td>Milk</td>
  49.                 <td>$1.00</td>
  50.                 <td>Hello PDF World</td>
  51.                 <td>Out Of Stock</td>
  52.             </tr>
  53.         </table>
  54.         <button onclick="printPDF();" type="button">打印</button>
  55.     </div>
  56.     <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
  57.     <script src='../../dist/jspdf.umd.js'></script>
  58.     <script src='./fonts/fzht-normal.js'></script>
  59.     <script>
  60.         //fzht-normal.js
  61.         (function () {
  62.             return
  63.             let { jsPDF } = jspdf;
  64.             var callAddFont = function () {
  65.                 var font = '一长串base64编码'
  66.                 this.addFileToVFS('fzht-normal.ttf', font);
  67.                 this.addFont('fzht-normal.ttf', 'fzht', 'normal');
  68.             };
  69.             jsPDF.API.events.push(['addFonts', callAddFont])
  70.         })();
  71.     </script>
  72.     <script>
  73.         var canPrint = false;
  74.         const { jsPDF } = jspdf
  75.           var pdf = new jsPDF({
  76.             orientation: "l",//l 横向 p 纵向
  77.             unit: "px",//这个单位设置了也没啥左右 好像一直都是用的px
  78.             hotfixes: ["px_scaling"],
  79.             format: [925.44, 357.5],// 纸张大小 默认a4 可选a0-a10 或者数组[宽,高] 单位好像一直是px
  80.             putOnlyUsedFonts: true,
  81.         });
  82. //通过pageCount 指定要打印几页
  83.         function printPDF(onlyFirstPage=true,pageCount=1) {
  84. pdf.setFont("fzht"); // set font html页面上也要设置字体 否则无效
  85. //html转pdf 还是先把html转图片 再转pdf
  86. //超出pdf页面大小的部分 将不会显示
  87. //打印预览页面调整横向 纵向 会自动缩放
  88. pdf.html(printElement, {
  89. callback: function (pdf1) {
  90. //成功回调
  91. //如果要添加中文 需要重新设置字体
  92. //pdf.setFont("fzht"); // set font
  93. //pdf1.text(10, 10, '欢迎访问 hangge.com');
  94. //保证只留第一页
  95. var pCount = pdf1.getNumberOfPages()
  96. if(pageCount<1)pageCount=1;
  97. //打印指定页数 超过的删除
  98. while(pCount>pageCount){
  99. for (var i = pageCount+1; i <= pCount; i++) {
  100. console.log(i)
  101. pdf1.deletePage(i)
  102. }
  103. pCount = pdf1.getNumberOfPages()
  104. }
  105. pdf1.autoPrint();// 直接打印 不显示预览页 好像没用 还是有预览页面
  106. //pdf1.autoPrint();//当在页面中打开pdf时候 直接打印 没有被打开过就不会弹出打印
  107. var iframe = document.getElementById('printframe');
  108. iframe.src = pdf1.output('bloburl');
  109. }
  110. });
  111. }
  112.     </script>
  113. </body>
  114. </html>

自动分页打印

  1. <style>
  2. #html {
  3. height: auto;
  4. font-family: fzht;
  5. width: 241mm;
  6. background-color: #fff;
  7. overflow: hidden;
  8. }
  9. .print-page {
  10. height: 92mm;
  11. width: 241mm;
  12. overflow: hidden;
  13. }
  14. </style>
  15. <div id="html">
  16. @{
  17. //每页的内容条数固定
  18. //这样能算出来指定的内容需要打印几页
  19. //打印完毕后 移除多余的页面 就可以保证没有空白页
  20. var startIndex = 0;
  21. var page= 0;
  22. while (startIndex < Model.ApplyItem.Count)
  23. {
  24. var items = Model.ApplyItem.Skip(startIndex).Take(6);
  25. startIndex += 6;
  26. page++;
  27. <div class="print-page">
  28. <table class="tborder">
  29. @foreach (var item in items)
  30. {
  31. <tr>
  32. <td>@item.StoreHouseName</td>
  33. <td>@item.Memo</td>
  34. </tr>
  35. }
  36. </table>
  37. </div>
  38. }
  39. }
  40. </div>
  41. @section js{
  42. <script>
  43. printPDF(false,@(page));
  44. </script>
  45. }

原文链接:http://www.cnblogs.com/xdq-zh/p/15795402.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号