jspdf添加宋体_JSPDF支持中文（思源黑体）采坑之旅，JSPDF中文字体乱码解决方案...

最新推荐文章于 2024-07-18 15:24:52 发布
最新推荐文章于 2024-07-18 15:24:52 发布
阅读量1.4k 收藏
点赞数
文章标签： jspdf添加宋体
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39559369/article/details/113392434
版权
本文详细介绍了如何在JSPDF中添加并使用思源黑体，以解决中文显示乱码的问题。首先，从指定链接下载ttf文件并重命名为小写。然后，创建font.js文件，将字体内容添加到VFS。在项目中引入font.js，并注册字体。注意，使用autoTable时需要使用默认字体NotoSansCJKtc。如果遇到内存溢出问题，可以调整node的内存限制。在Electron项目中，通过IPC通信处理大型字体文件。最后，提供了解决内存限制的方法和代码示例。
摘要由CSDN通过智能技术生成

我拍个砖，通常标称自己文章完美解决何种问题的，往往就是解决不了任何问题！

众所周知，JSPDF是一个开源的，易用的，但是对中文支持非常差的PDF库。

下面，我教大家，如何在pdf中使用思源黑体。思源黑体是开源字体。思源黑体具有很广泛使用性，实用性，也是规避字体版权风险的重要选择！请严格按照我说的做！

1、准备思源黑体的ttf文件，不要用otf文件，如下

https://github.com/be5invis/source-han-sans-ttf/releases

.

3fcdad19ca21060b92058fd68f681d39.png

2、把下载的字体命名统统改为小写，如下

476c9355e3297c0a22d660466e9e3ccd.png

为什么改为小写，见 issues2465 ，命名为大写的统统失效~

8ac27a71a8da5e2af8d54810ad4303fe.png

3、于是，我们得到这2个文件

9ef93c94073856aa2b822ca151f38146.png

PS：字体是bold字体，网站的fontStyle你就选bold，normal也是这样！

用记事本(win)打开这2个文件，不要用编辑器，会异常卡，除非你内存高，mac爱什么打开什么打开，双击选中那串长的，ctrl+c。

最低0.47元/天 解锁文章
weixin_39559369
关注
default_vfs-normal.js
08-26
html引入字体文件时文件过大 导致页面加载缓慢，此文件为思源黑体7000字精简版，直接引用即可。（我是在引用jspdf插件时，出现中文乱码的时候，引用文件default_vfs.js解决中文乱码后由于文件过大，导致页面卡顿，后制作的default_vfs-normal.js字体文件，大概2M左右解决了加载慢的问题）jspdf中引入js后，加入doc.addFont('NotoSansCJKtc-Regular.ttf', 'NotoSansCJKtc', 'normal'); doc.setFont('NotoSansCJKtc');解决中文乱码
pdfjs 字体新增_JSPDF支持中文（思源黑体）采坑之旅，JSPDF中文字体乱码解决方案...
weixin_39736547的博客
12-21 1737
我拍个砖，通常标称自己文章完美解决何种问题的，往往就是解决不了任何问题！众所周知，JSPDF是一个开源的，易用的，但是对中文支持非常差的PDF库。下面，我教大家，如何在pdf中使用思源黑体。思源黑体是开源字体。思源黑体具有很广泛使用性，实用性，也是规避字体版权风险的重要选择！请严格按照我说的做！1、准备思源黑体的ttf文件，不要用otf文件，如下https://github.com/be5invi...
html2canvas + jspdf 纯前端HTML导出PDF的实现与问题
最新发布
幸运小男神的博客
07-18 2348
这几天接到一个需求，富文本编辑器的内容不仅要展示出来，还要实现展示的内容导出pdf文件。一开始导出pdf的功能是由后端来做的，然后发现对于宽度太大的图片，导出的pdf文件里部分图片内容被遮盖了，但在前端是正常显示的，只因为class样式后端无法解析。然后，后端开发人员就嫌麻烦，让前端来实现导出pdf的功能。。。使用 html2canvas + jsPDF 纯前端导出pdf的方式还是有很多问题的，一般情况下都是后端进行文件的导出，前端配合解决样式问题。
【jspdf】前端html生成pdf的两种办法 以及 引入中文字体
qq_29184685的博客
04-24 1万+
【jspdf】前端html生成pdf的两种办法 以及 引入中文字体
IDEA Gradle项目中，tomcat 控制台输出乱码
猎人在吃肉
07-09 472
方法1： idea -> Edit Configuration ->VM options 中添加 -Dfile.encoding=utf-8 方法2 项目 -> build.gradle 中添加 tasks.withType(JavaCompile) { options.encoding = "UTF-8" } 方法3 gradle 的安装目录 --> bin 目录 --> gradle.bat 中添加如下内容： set DEFAULT_JVM_OPTS="Dfile.
jspdf添加宋体_jspdf下载pdf文件模糊，字体加粗等样式失效
weixin_39913141的博客
12-22 884
jspdf下载pdf文件模糊，字体加粗等样式失效exportPDF = () => {let { shop } = this.props;let element = document.getElementById('pdf');let { height } = getComputedStyle(element, false);let { width } = getComputedStyle(...
一篇文章介绍前端PDF导出方案以及乱码问题解决
superherooooss的博客
02-06 3813
打开导出的pdf文件可以发现原先应显示的文字 “欢迎使用jsPDF技术下载导出pdf文件”，结果显示成乱码。打开下载的pdf文件显示为正确的中文字体，大家可以根据个人的需求在网上下载不同的字体文件.ttf。选择文件夹，把下载好的字体文件上传。表单中的其他内容不需要更改。打开jsPDF-master中的fontconverter.html页面。创建一个新的font.js ，将复制的font内容粘贴到font.js中。在主程序中引入解决乱码部分，最新的代码如下。这个依赖，所以需要先下载依赖。
jsPDF乱码的解决方法
qq_34188180的博客
12-15 1813
jsPDF乱码的解决方法
Vue中使用jspdf转为pdf并文件下载（附：解决文件中文乱码
2301_79258992的博客
10-13 1179
github中搜索jspdf，clone或者下载zip文件，下载之后找到 ’fontconverter‘ 打开 里面有一个'fontconverter.html'，在浏览器中运行。打开之后就是这个样子，选择你的字体文件(xx.ttf) 然后点击Create会自动下载一个依赖你上传的字体文件的js，将这个js拖动到你的项目中使用。然后再项目中引入 回到第 3 步的方法内部中，可以看到我们使用了这个字体并定义了字体格式。有某些场景，比如说页面有一个下载按钮，点击了下载按钮之后，会下载一个pdf文件。
jspdf添加宋体_pdfjs 引入字体失败
weixin_39628247的博客
12-22 1140
这个pdf是宋体 使用的pdfjs-dist 2.0.943ref="container"class="page-container":style="{height: `${pageHeight}px`}">import pdfJS from 'pdfjs-dist'import data from './kkk.json'const cMapUrl = '../../../node_mo...
使用jspdf生成遇到的问题
小权权的博客
07-14 3260
jsPDF 是一个基于 HTML5 的客户端解决方案，用于生成各种用途的 PDF 文档。 官网地址：https://rawgit.com/MrRio/jsPDF/master/docs/ 1、安装：npm install jspdf 2、引入：import jsPDF from “jspdf” 今天遇到一个业务，将echarts页面转换成pdf当做报告使用，因为页面较长，pdf要好几页，简单的分割又会切割内容，记录一下解决方法。 导航条是因为原页面导航条的定位出了页面的位置，所以点击生成pdf时，生成一个临
PDF.js 入门指南
weixin_58784569的博客
08-03 2451
PDF.js是一个用于在网页中显示PDF文档的JavaScript库。它是由Mozilla开发的，是一个完全免费、开源的工具。在本篇文章中，我们将详细介绍如何使用PDF.js进行前端开发，包括基本的使用方法、代码示例以及一些实用的技巧。
jspdf 中文乱码、支持中文的解决方案，支持中文、日语、韩语等多国字体语言...
热门推荐
大猩猩X
05-30 1万+
jspdf 支持中文的解决方案，支持中文、日语、韩语等… 默认情况下，jspdf 只支持 ASCII-codepage 编码，如果用了中文就会导致出现乱码，jspdf 虽然不支持中文字体，但是支持添加字体库，那么我们就可以通过设置字体库来彻底解决中文乱码的问题。 <script src="https://cdn.jsdelivr.net/npm/jspdf"></script> var doc = new jsPDF(); doc.text(20, 20, '支持简体中文、支持繁體
jspdf添加宋体,jsPDF中的自定义字体?
weixin_34547628的博客
02-17 1198
Is it possible to include custom fonts in jsPDF ?With the basic library, if I console log 'doc.getFontList()' I get:Courier, Helvetica, Times, courier, helvetica, timesBut, say I want to use 'Comic Sa...
pdf思源黑体 乱码
06-12
PDF 思源黑体是一款由阿里巴巴集团开发的开源中性字体，它的设计灵感来源于思源宋体，旨在提供易读性和广泛的设备支持，包括在 PDF 文件中的显示。如果你在 PDF 文档中遇到乱码问题，可能是以下几个原因： 1. 字体不匹配：确保你在 PDF 中使用的字体和文档中实际显示的字体一致。如果使用了思源黑体，但是 PDF 编辑器或阅读器没有内置这款字体，可能会导致无法正确显示。 2. 编码问题：PDF 文件可能采用的是特定的字符编码，如 UTF-8 或 GB2312，如果文件没有正确设置编码，中文字符可能会显示为乱码。 3. 编辑错误：在编辑 PDF 的过程中，如果格式转换或编码处理不当，也可能导致文本乱码。 4. 设备兼容性：某些老旧或非主流的设备可能不支持思源黑体，需要更新设备或者使用支持该字体的软件阅读。 为了解决这个问题，你可以尝试以下步骤：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值