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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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>
}