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>
}
jsPDF 添加 中文字体 分页打印 移除空白页的更多相关文章
- 织梦dede编辑器ckeditor如何添加中文字体不乱码
dedecms内容编辑器ckeditor没有中文字体,找了很多教程都是千篇一律,而且都是错的,终于找到了一篇,结合自己的实际操作,来教您如何添加中文字体,并且解决乱码问题. 工具/原料 dedec ...
- Cent os 6.8添加中文字体
作者:邓聪聪 Cent os 6.8添加中文字体的相关步骤: [root@bogon ]#yum -y install fontconfig #yum安装fontconfig [root@bogon ...
- FCKEditor编辑器添加中文字体的方法
默认情况下,FCKEditor在进行文本编辑时,无法使用中文字体.让其添加中文字体的方法: 1.打开 fckconfig.js 文件,找到第154行(大概),会发现: 程序代码: FCKConfig. ...
- CENTOS 7 和 JDK 添加中文字体
写在前面的话 当运维总是遇到各种奇奇怪怪的问题,比如新的 JAVA 项目上线,login 界面有个验证码,结果部署后发现,要么显示的奇奇怪怪,要么压根不显示. 或者在使用一些开源的 JAVA 项目的时 ...
- Linux 添加中文字体库，解决Java 生成中文水印不显示问题
本机 Windows 环境测试以下代码生成中文水印完全没问题,但是发布到Linux下不显示,一开始以为是报错了没打印出来,搜索发现直接提示中文乱码的或者不显示的,才明白原来是字体库原因,于是开始解决这 ...
- Ubuntu 添加中文字体
查看系统类型 cat /proc/version 查看中文字体 fc-list :lang=zh-cn 安装字体 sudo apt install -y --force-yes --no-instal ...
- excel打印出现多余空白页
问题: 解决方法一:设置打印区域 步骤:选择需要打印的内容--页面布局--打印区域--设置打印区域即可 解决方法二:删除多余的打印空白页 步骤:视图--分页预览--选中多余的空白页删除即可
- chrome浏览器使用jqprint插件打印时偶尔空白页问题
最近测试老是提bug说是有50%的概率打印出空白页,之前我也一直发现偶尔会出现这个问题,只是一直没有发现原因. 今天终于下定决心找到问题所在.开始吧! 查看源码一行行debug,发现问题只可能出现在这 ...
- 制作OpenOffice的Docker镜像并添加中文字体解决乱码问题
官网下载openoffice http://www.openoffice.org/download/index.html 本文使用的是Docker官方发布的CentOS7镜像作为基础镜像.镜像的获取方 ...
- CentOS 7 安装字体库 & 中文字体
前言 报表中发现有中文乱码和中文字体不整齐(重叠)的情况,首先考虑的就是操作系统是否有中文字体,在CentOS 7中发现输入命令查看字体列表是提示命令无效: 如上图可以看出,不仅没有中文字体,连字体 ...
随机推荐
- go grpc流式和非流式的例子
参考grpc官方: https://grpc.io/docs/quickstart/go.html 或官方中文翻译: http://doc.oschina.net/grpc?t=60133 安装pr ...
- 二十: MySql 事务日志
MySql 事务日志 事务有4种特性:原子性.一致性.隔离性和持久性.那么事务的四种特性到底是基于什么机制实现呢? 事务的隔离性由 锁机制 实现. 而事务的原子性.一致性和持久性由事务的 redo 日 ...
- 字典嵌套列表 与 列表嵌套字典 导出为csv 的方法
字典嵌套列表 导出csv {'rank': ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '1 ...
- MYSQL中正则表达式检索数据库
1.MySQL中使用通配符检索数据库,之外还可以使用正则表达式来检索数据. 使用通配符 '_' 和 '%'的区别如下, 使用通配符的技巧:一般的来说 通配符可以处理数据,但是消耗内存较大 ...
- elementPlus使用el-icon
按着文档来撒 yarn add @element-plus/icons-vue main.ts import * as ElementIcons from '@element-plus/icons-v ...
- 当未指定且存在多个构造器，实例化对象时Spring如何选择？
前言 在前面的讲解中,我们了解了如何获取构造器.当只有一个符合条件的构造器时,自然会选择它作为初始化的构造器.然而,在上一节中,我们遇到了一种特殊情况:当有多个符合条件的构造器时,返回的是一个数组.在 ...
- iview table 左侧固定列 右侧固定列 滚动的时候 表格错位 解决方案
iview table 左侧固定列 右侧固定列 滚动的时候 表格错位 解决方案 iview table 滚动条位置重置 https://www.jianshu.com/p/32fcd50489ff
- baidu 突然打不开了 20210621
换了个dns 123.125.81.6 114.114.114.114
- springboot+springsecurity+layui+cherryMd博客系统
演示地址:http://175.24.198.63:9090/front/index PS: 演示环境的服务器配置很低,带宽很小,若打开速度较慢,稍微等等哦~ 现在动不动就是前后端分离,其实访问量不大 ...
- 5分钟上手Python爬虫：从干饭开始，轻松掌握技巧
很多人都听说过爬虫,我也不例外.曾看到别人编写的爬虫代码,虽然没有深入研究,但感觉非常强大.因此,今天我决定从零开始,花费仅5分钟学习入门爬虫技术,以后只需轻轻一爬就能查看所有感兴趣的网站内容.广告? ...