前端 PDF 打印工具 jsPDF 打印中文时使用思源字体 [解决中文乱码]

随心笔客 张小妞的个人博客 本文由博客端 https://fuyiyi.imdo.co 主动推送
本贴最后更新于 361 天前,其中的信息可能已经时移俗易

对于 jsPdf 版本 1.4.0 和更高版本,可以使用自定义 ttf 字体,如思源字体,标准 jsPDF 1.5.3 实现支持 14 种标准 PDF 字体。14 种标准 PDF 字体如下:
jspdf.png

如果要使用上述字体之一,则可以直接使用 setFont() 方法进行设置,而不需要执行任何其他操作。如果使用自定义字体,则需要使用 base64 编码,并进行相应操作。要在 PDF 文件中使用自定义字体,则需要所需字体文件的.ttf 版本。以下为思源字体,您可以前往 SourceHanSansCN 下载。

image.png

在下载.ttf 字体文件后,需要将要使用的字体上传到此 jsPDF Font Converter 进行 Base64 编码,或下载 fontconverter 文件后,本地浏览器打开 fontconverter.html 文件转换。

注意:不要输入 fontName 字段,文件选择后会自动生成 fontName 名称,然后选择 fontStyle,或模块格式,然后点击 Create 按钮下载生成的 js 文件。

image.png

以下在设置具体字体时的名称 SourceHanSansCN-Normal 与上面的 fontName 名称一致。

doc.setFont('SourceHanSansCN-Normal', 'normal');

需要注意的是,经过研究,如果选择 SourceHanSansCN-Bold.ttf 字体时,fontStyle 选择 bold,生成的字体 js 在引用后一直不生效,经过研究,发现在 fontStyle 选择 normal 时,即采用

doc.setFont('SourceHanSansCN-Bold', 'normal');

才会生效。个人理解是将 Bold 当成了一个新的 normal 类型的字体而已,即在设置字体时,其名称为 SourceHanSansCN-Bold 的新字体,且其字体类型为 normal 类型。

另外,在 Google 上搜索的话,能够搜索到的大部分内容中均有的代码,但该代码未能直接采用配置模式进行导出设置。

var doc = new jsPDF('landscape'); 

doc.addFileToVFS('SourceHanSansCN-Normal-normal.ttf','SourceHanSansCN base64编码'); 
doc.addFont('SourceHanSansCN-Normal-normal.ttf','SourceHanSansCN-Normal','normal'); 
doc.setFont('SourceHanSansCN-Normal-normal')

采用配置文件方式时,需要先引入字体 js 文件,如下:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.10.21/libs/jsPDF/jspdf.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.10.21/libs/jsPDF-AutoTable/jspdf.plugin.autotable.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/zxniuniu/SourceHanSansCN/js/jspdf/SourceHanSansCN-Normal-normal.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.10.21/tableExport.min.js"></script>

tableExport 的参数如下:

let conf = {
	type: 'pdf',
	jspdf: {
		orientation: 'landscape', // 'portrait' or 'landscape'
		autotable: {
			styles: {
				font: 'SourceHanSansCN-Normal',
				fontStyle: 'normal'
			},
			headerStyles: {
				font: 'SourceHanSansCN-Normal',
				fontStyle: 'normal'
			},
			tableWidth: 'wrap'
		}
	}
};
$('#pdfstyles').tableExport(conf);

你可以打开 jsPDF 中文字体导出-测试 进行测试,全部演示代码可参见 jsPDF 中文字体导出-源码,以下为导出结果情况。或者参见官方示例 jsPDF Demos

20201127162143.png

参见:

JSPDF Custom Font Add not working - Stack Overflow

jsPDF Error – Font does not exist in vFS

How to Use Custom Fonts with jsPDF

思源宋体,如何评价,以及如何正确使用

fontconverter 在线转换工具

Html pdf Chinese export solve the garbage problem in the correct posture

.html method can't handle Chinese correctly, even after used the .setFont method

JSPDF problem FortAwesome

Is it possible to use custom Google web fonts with jsPDF

Add Custom font in jspdf

使用 jsPDF 生成 PDF 文件

JSPDF 支持中文(思源黑体)采坑之旅,JSPDF 中文字体乱码解决方案

  • 工具

    子曰:“工欲善其事,必先利其器。”

    224 引用 • 562 回帖 • 1 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    353 引用 • 3283 回帖 • 395 关注
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    193 引用 • 1974 回帖
2 操作
zxniuniu 在 2020-12-12 17:36:29 更新了该帖
zxniuniu 在 2020-12-08 10:47:31 更新了该帖

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • zxniuniu
    作者

    经进一步 Google,有时候字体不生效不知是不是因为字体名称中有大写字母导致的,比如将 SourceHanSansCN 改为其它小写,后面有机会的话再验证下。