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

本贴最后更新于 1440 天前,其中的信息可能已经时移俗易

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

  • Courier
  • Courier-Bold
  • Courier-BoldOblique
  • Courier-Oblique
  • Helvetica
  • Helvetica-Bold
  • Helvetica-BoldOblique
  • Helvetica-Oblique
  • Symbol
  • Times-Roman
  • Times-Bold
  • Time-Italic
  • Time-BoldItalic

如果要使用上述字体之一,则可以直接使用 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 中文字体乱码解决方案

  • 工具

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

    286 引用 • 729 回帖
  • 开源

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

    408 引用 • 3574 回帖
  • GitHub

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

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

相关帖子

欢迎来到这里!

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

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

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

推荐标签 标签

  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 58 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 67 关注
  • Gzip

    gzip (GNU zip)是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件,它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

    9 引用 • 12 回帖 • 134 关注
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    53 引用 • 37 回帖
  • 单点登录

    单点登录(Single Sign On)是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    8 引用 • 30 回帖 • 407 关注
  • wolai

    我来 wolai:不仅仅是未来的云端笔记!

    2 引用 • 14 回帖
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 94 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 51 关注
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言,应用广泛。C++ 支持多种编程范式,面向对象编程、泛型编程和过程化编程。

    107 引用 • 153 回帖
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    179 引用 • 995 回帖
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 62 关注
  • OnlyOffice
    4 引用 • 3 关注
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    25 引用 • 191 回帖 • 16 关注
  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    125 引用 • 169 回帖 • 1 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 31 关注
  • 安全

    安全永远都不是一个小问题。

    199 引用 • 816 回帖 • 1 关注
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 1 关注
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1434 引用 • 10054 回帖 • 490 关注
  • golang

    Go 语言是 Google 推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发 Go,是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    497 引用 • 1387 回帖 • 283 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 664 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 362 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 3 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 463 关注