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>

}

jsPDF 添加 中文字体 分页打印 移除空白页的更多相关文章

  1. 织梦dede编辑器ckeditor如何添加中文字体不乱码

    dedecms内容编辑器ckeditor没有中文字体,找了很多教程都是千篇一律,而且都是错的,终于找到了一篇,结合自己的实际操作,来教您如何添加中文字体,并且解决乱码问题.   工具/原料 dedec ...

  2. Cent os 6.8添加中文字体

    作者:邓聪聪 Cent os 6.8添加中文字体的相关步骤: [root@bogon ]#yum -y install fontconfig #yum安装fontconfig [root@bogon ...

  3. FCKEditor编辑器添加中文字体的方法

    默认情况下,FCKEditor在进行文本编辑时,无法使用中文字体.让其添加中文字体的方法: 1.打开 fckconfig.js 文件,找到第154行(大概),会发现: 程序代码: FCKConfig. ...

  4. CENTOS 7 和 JDK 添加中文字体

    写在前面的话 当运维总是遇到各种奇奇怪怪的问题,比如新的 JAVA 项目上线,login 界面有个验证码,结果部署后发现,要么显示的奇奇怪怪,要么压根不显示. 或者在使用一些开源的 JAVA 项目的时 ...

  5. Linux 添加中文字体库，解决Java 生成中文水印不显示问题

    本机 Windows 环境测试以下代码生成中文水印完全没问题,但是发布到Linux下不显示,一开始以为是报错了没打印出来,搜索发现直接提示中文乱码的或者不显示的,才明白原来是字体库原因,于是开始解决这 ...

  6. Ubuntu 添加中文字体

    查看系统类型 cat /proc/version 查看中文字体 fc-list :lang=zh-cn 安装字体 sudo apt install -y --force-yes --no-instal ...

  7. excel打印出现多余空白页

    问题: 解决方法一:设置打印区域 步骤:选择需要打印的内容--页面布局--打印区域--设置打印区域即可 解决方法二:删除多余的打印空白页 步骤:视图--分页预览--选中多余的空白页删除即可

  8. chrome浏览器使用jqprint插件打印时偶尔空白页问题

    最近测试老是提bug说是有50%的概率打印出空白页,之前我也一直发现偶尔会出现这个问题,只是一直没有发现原因. 今天终于下定决心找到问题所在.开始吧! 查看源码一行行debug,发现问题只可能出现在这 ...

  9. 制作OpenOffice的Docker镜像并添加中文字体解决乱码问题

    官网下载openoffice http://www.openoffice.org/download/index.html 本文使用的是Docker官方发布的CentOS7镜像作为基础镜像.镜像的获取方 ...

  10. CentOS 7 安装字体库 & 中文字体

    前言 报表中发现有中文乱码和中文字体不整齐(重叠)的情况,首先考虑的就是操作系统是否有中文字体,在CentOS 7中发现输入命令查看字体列表是提示命令无效:  如上图可以看出,不仅没有中文字体,连字体 ...

随机推荐

  1. 【Azure App Service】Web Job 报错 UNC paths are not supported. Defaulting to Windows directory.

    问题描述 PHP的Web Job,通过artisan来配置路径启动PHP任务,相关启动脚本如下: artisan_path = "d:\\home\\site\\wwwroot"; ...

  2. 【Azure Redis 缓存】Azure Cache for Redis有默认备份可以用于恢复么？

    问题描述 Azure Cache for Redis有默认备份可以用于恢复么? 答: 只有高级版Redis有. 问题原因 Azure Cache for Redis有不同的版本定价层(基本 Basic ...

  3. 【工具】用nvm管理nodejs版本切换，真香！

    前言 缘由 换个nodejs版本比换个媳妇还难,nvm堪称管理nodejs版本神器 事情的起因,公司的一些老项目需要依赖稳定老版本的nodejs,但是自己的一些项目所需要的是更高版本的nodejs,这 ...

  4. ConfigMap挂载与Subpath在Nginx容器中的应用

    本文分享自华为云社区<nginx.conf以configmap文件形式挂载到nginx容器中以及subpath使用场景>,作者:可以交个朋友. 背景 nginx.conf通过configm ...

  5. function 的入参 如果是指针的话，如果你用的好的话，会颠覆三观啊 这里就是指对象，数组不用考虑 // 夏娃的苹果

    function 的入参 如果是指针的话,如果你用的好的话,会颠覆三观啊 这里就是指对象,数组不用考虑 这就是一颗 夏娃的苹果

  6. 提升地理空间分析效率，火山引擎ByteHouse上线GIS能力

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 在数字化时代,地理空间分析(Geospatial Analytics)成为辅助企业市场策略洞察的重要手段.无论是广 ...

  7. FIR滤波器的设计和实现

    FIR的作用和价值   FIR(Finite Impulse Response)滤波器:有限长单位冲激响应滤波器,又称为非递归型滤波器,是数字信号处理系统中最基本的元件,它可以在保证任意幅频特性的同时 ...

  8. uniapp踩坑记录

    sessionStorage.setItem('token', data.msg)uni.setStorage('token', res.data); 搞了半天登录后直接通过获取getstorage获 ...

  9. Vue + Element-ui实现后台管理系统(6)---权限管理思路讲解

    权限管理思路讲解 有关后台管理系统之前写过五篇博客,看这篇之前最好先看下这五篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-system 1.Vue + El ...

  10. vscode远程登陆免密码

    A,B双方通信,A想向B发送信息,又不想让别人知道,使用非对称加密:若A向B发送信息,A需要知道B的公钥简称B-pub,用B-pub加密信息后 发送给B,B再用自己的私钥B-prv解密出信息. A想验 ...