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

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

对于 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 中文字体乱码解决方案

  • 工具

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

    288 引用 • 734 回帖 • 2 关注
  • 开源

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

    407 引用 • 3578 回帖 • 1 关注
  • GitHub

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

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

相关帖子

欢迎来到这里!

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

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

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

推荐标签 标签

  • DNSPod

    DNSPod 建立于 2006 年 3 月份,是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析,让电信用户访问电信的服务器,网通的用户访问网通的服务器,教育网的用户访问教育网的服务器,达到互联互通的效果。

    6 引用 • 26 回帖 • 517 关注
  • 单点登录

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

    9 引用 • 25 回帖
  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1454 回帖
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    58 引用 • 22 回帖
  • C++

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

    107 引用 • 153 回帖
  • 智能合约

    智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 2 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • PWA

    PWA(Progressive Web App)是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术,在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 159 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 63 关注
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖 • 1 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    85 引用 • 139 回帖
  • 人工智能

    人工智能(Artificial Intelligence)是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    135 引用 • 190 回帖
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 724 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    123 引用 • 74 回帖 • 2 关注
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 484 关注
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    7 引用 • 40 回帖
  • wolai

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

    2 引用 • 14 回帖 • 1 关注
  • QQ

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

    45 引用 • 557 回帖 • 44 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 106 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖 • 1 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 1 关注
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • Gzip

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

    9 引用 • 12 回帖 • 147 关注
  • RYMCU

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

    4 引用 • 6 回帖 • 52 关注
  • 笔记

    好记性不如烂笔头。

    308 引用 • 793 回帖