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

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

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

  • 工具

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

    292 引用 • 738 回帖 • 1 关注
  • 开源

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

    410 引用 • 3578 回帖
  • 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 改为其它小写,后面有机会的话再验证下。

推荐标签 标签

  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖 • 3 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    166 引用 • 595 回帖
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖 • 1 关注
  • 自由行
    1 关注
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    88 引用 • 1235 回帖 • 405 关注
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    359 引用 • 1831 回帖 • 1 关注
  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    548 引用 • 674 回帖
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 17 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 63 关注
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    325 引用 • 1395 回帖 • 1 关注
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 633 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    127 引用 • 589 回帖
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    729 引用 • 1275 回帖
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖 • 3 关注
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    17 引用 • 236 回帖 • 297 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 183 关注
  • Firefox

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

    8 引用 • 30 回帖 • 414 关注
  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 134 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 802 关注
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 693 关注
  • MongoDB

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

    90 引用 • 59 回帖 • 6 关注
  • OneDrive
    2 引用 • 3 关注
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 438 关注
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    579 引用 • 3535 回帖
  • 智能合约

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

    1 引用 • 11 回帖 • 2 关注
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖 • 1 关注
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖 • 1 关注