pdfjs 字体新增_JSPDF支持中文(思源黑体)采坑之旅,JSPDF中文字体乱码解决方案...
我拍个砖,通常标称自己文章完美解决何种问题的,往往就是解决不了任何问题!
众所周知,JSPDF是一个开源的,易用的,但是对中文支持非常差的PDF库。
下面,我教大家,如何在pdf中使用思源黑体。思源黑体是开源字体。思源黑体具有很广泛使用性,实用性,也是规避字体版权风险的重要选择!请严格按照我说的做!
1、准备思源黑体的ttf文件,不要用otf文件,如下
https://github.com/be5invis/source-han-sans-ttf/releases
.
2、把下载的字体命名统统改为小写,如下
为什么改为小写,见 issues2465 ,命名为大写的统统失效~
3、于是,我们得到这2个文件
PS:字体是bold字体,网站的fontStyle你就选bold,normal也是这样!
用记事本(win)打开这2个文件,不要用编辑器,会异常卡,除非你内存高,mac爱什么打开什么打开,双击选中那串长的,ctrl+c。
你的项目新建font.js,内容如下
export functionaddfont(pdf) {var font = 'AADSSDDT12......' //←就是很长那串
pdf.addFileToVFS('bolds', font)
return true;
}
使用方法:(我的项目是ant-design pro 4.0)
import { addfont } from '@/font/font'
//前面只是添加了字体,还要注册字体,addfont第3个参数一定是normal,即使你add的字体是bold的,也要设置为normal
addfont(doc)
doc.addFont('bolds', 'b', 'normal')//使用字体时,使用这句即可
doc.setFont('b');
坑:
1、autoTable需要使用默认字体,是一种叫做NotoSansCJKtc-Regular.ttf的字体,否则乱码,或者你改源码,使之兼容
doc.addFont('NotoSansCJKtc-Regular.ttf', 'NotoSansCJKtc', 'normal');
doc.setFont('NotoSansCJKtc');
2、因为字体文件太大,导致JS运行时内存溢出 JavaScript heap out of memory
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
资料:https://stackoverflow.com/questions/38558989/node-js-heap-out-of-memory
解决办法:https://lwjandmy.github.io/myblog/articles/+.+category+.+%E7%BC%96%E7%A8%8BJavaScript+.+title+.+node%20%E5%87%BA%E7%8E%B0heap%20out%20of%20memory%E9%97%AE%E9%A2%98+.+createtime+.+20181228%E4%B8%80190612+.+lastmodifiedtime+.+20181228%E4%B8%80190612+.+.html
由于我用了umi,因此改umi.cmd,如下
@IF EXIST "%~dp0\node.exe"("%~dp0\node.exe" "%~dp0\..\umi\bin\umi.js" %*) ELSE (
@SETLOCAL
@SET PATHEXT=%PATHEXT:;.JS;=;%node--max-old-space-size=4096 "%~dp0\..\umi\bin\umi.js" %*)
若你是用webpack,改webpack.cmd
3、最后不得不说句,我把字体放在前端项目,是因为我的项目要打包为electron的,若你的项目是发布到线上,最好做cdn或者考虑使用默认一种字体~!
由于字体文件实在太大,执行打包时必定触发V8的内存限制,我使用umi打包时,8G内存直接爆了,--max-old-space-size=7000也不起作用,换成mac的16G内存一样爆了,问题在哪?思维错了!我们不能苛求webpack/umi能够具有打包系统级文件的能力:如大型音视频,字体包,压缩文件,msi等,此时只有使用系统的文件管理能力来加持,因此,ele的原生能力就要发挥作用。
用到线程通信和node的文件读取能力即可
//在主进程中.
const { ipcMain } = require('electron')
ipcMain.on('asynchronous-message', (event, arg) =>{
console.log(arg)//prints "ping"
event.reply('asynchronous-reply', 'pong')
})
ipcMain.on('synchronous-message', (event, arg) =>{
console.log(arg)//prints "ping"
event.returnValue = 'pong'})
//在渲染器进程 (网页) 中。
const { ipcRenderer } = require('electron')
console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) //prints "pong"
ipcRenderer.on('asynchronous-reply', (event, arg) =>{
console.log(arg)//prints "pong"
})
ipcRenderer.send('asynchronous-message', 'ping')
所谓渲染器进程就是你的前端项目,下面说一下的处理方式
1 准备字体文件
2.由于不是项目主要部分,而是支持性部分,因此我就用了一个回调地狱 /滑稽
var fs = require("fs");
ipcMain.on('asynchronous-message', (event, arg) =>{
console.log('main', arg) //请求的消息
//使用通信方式输送字体给前端
let filePath = path.join(__dirname, ".", "font/font.js");
let filePath2= path.join(__dirname, ".", "font/font2.js");
let filePath3= path.join(__dirname, ".", "font/font3.js");
console.log(filePath,"filePath")
fs.readFile(filePath, { encoding:"utf-8" }, function(err, fr) {//readFile回调函数
//if (err) {
//console.log(err);
//}
fs.readFile(filePath2, { encoding:"utf-8" }, function(err, fr2) {//readFile回调函数
fs.readFile(filePath3, { encoding:"utf-8" }, function(err, fr3) {//readFile回调函数
event.reply('asynchronous-reply', {
addFont: fr,
addFont2: fr2,
addFont3: fr3,
})
})
})
})
})
前端调用
const { ipcRenderer } = require('electron')
ipcRenderer.send('asynchronous-message', 'ping')
ipcRenderer.on('asynchronous-reply', (event, arg) =>{//console.log('web', arg) // prints "pong"
const {
addFont,
addFont2,
addFont3
}=argthis.setState({
addFont,
addFont2,
addFont3
})
})
使用字体
doc.addFileToVFS('bolds', this.state.addFont)
doc.addFileToVFS('normals', this.state.addFont2)
doc.addFont('bolds', 'b', 'normal')
doc.addFont('normals', 'n', 'normal')
...
doc.setFont('n');
...
doc.setFont('b');
pdfjs 字体新增_JSPDF支持中文(思源黑体)采坑之旅,JSPDF中文字体乱码解决方案...相关推荐
- react-native-webrtc之采坑之旅
目标 1.实现APP与WEB端安全帽功能通过摄像头的实时通信,再web端可以查看手机摄像头获取的图像,手机上也可实时显示画面: 2.连接.下线 3.切换分辨率.前后摄像头 使用的相关工具(没有一个不踩 ...
- jspdf添加宋体_JSPDF支持中文(思源黑体)采坑之旅,JSPDF中文字体乱码解决方案...
我拍个砖,通常标称自己文章完美解决何种问题的,往往就是解决不了任何问题! 众所周知,JSPDF是一个开源的,易用的,但是对中文支持非常差的PDF库. 下面,我教大家,如何在pdf中使用思源黑体.思源黑 ...
- esxi直通 gen8_HP MicroServer Gen8与ESXI采坑之旅
安装镜像下载 最新的 ESXI 6.5 的 HP 定制镜像可以在这个 URL 进行下载: https://my.vmware.com/web/vmware/details?productId=614& ...
- 小爱音箱提示“系统出现点问题,请检查配置。。。“采坑之旅
起因:用着好好的突然就不好使了,语音问小爱音箱提示"系统遇到点问题,请检查配置或者稍后重试" 这个问题实质是小爱音箱连接WiFi失败 到目前为止,试了好几个方法,记录一下. 1.首 ...
- 从APP跳转到微信指定联系人聊天页面功能的实现与采坑之旅
起因: 最近做的APP中有一个新功能:已知用户微信号,可点击直接跳转到当前用户微信聊天窗口页面. 当时第一想法是使用无障碍来做,并且觉得应该不难,只是逻辑有点复杂.没想到最终踩了好多坑,特地把踩过的坑 ...
- (原创)修改BIOS让华硕Z87-A老主板支持NVMe硬盘启动(采坑实录)
当年经典的华硕Z87-A主板至今仍然老当益壮,美中不足就是不支持NVMe SSD作为启动盘.由于工作生活繁忙,2年多来陆陆续续查了好多资料,再加上有CH341A编程器加持,自认已经准备得够充分.最近乘 ...
- c语言font6x8,爱字体下载安卓版-iFont爱字体下载V5.9.8.6 安卓手机版-全新的手机字体软体西西软件下载...
iFont爱字体是一款全新的手机字体美化软件,拥有简体.繁体.英体.韩语.日语五大类在线字体大全.集成上百款精美可爱的中英文字体,最新最全的英文.简繁体字库.轻轻松松换字体,简简单单换心情!字体随心变 ...
- LVGL 字体转换与支持
1.前言 在LVGL中,自带了中英文字体,英文字体倒是挺全的,字号从8到48都有.而中文字体呢,则只有16号字体的lv_font_simsun_16,更严重的是,包含的汉字还不全... 本文章主要讲两 ...
- arch终端添加中文支持_Archlinux中文化--怎么显示中文的界面
Archlinux中文化--怎么显示中文的界面? 怎么显示中文的界面? 要正确实现中文,必需设置正确的locale和安装合适的中文字体. locale的设定 Linux中通过locale来设置程序运行 ...
- 数据库备份DBS 新增Region支持:华北2、华东2和华南1
开放区域: 数据库备份DBS 新增Region支持:华北2.华东2和华南1,用户可以通过DBS售卖页中的"地域"进行选择
最新文章
- 修复Chrome上的ERR_TOO_MANY_REDIRECTS错误?
- nyoj1121周期串
- aes c# java_AES加密,C#和java相同
- Eclipse Server runtime设置里找不到apache tomcat的处理方法
- PHP于js的交互,关于php与js交互问题
- u3d文件上传至服务器,unity 上传图片到云服务器
- 如何使用curl访问k8s的apiserver
- 开发框架:AdminLTE
- Lync server 2013新建持久聊天室提示用户未启用SIP
- 非常易懂且全面的计算机科学概论知识总结
- keil MDK uVision 5最新版本下载(含有注册机)
- MODBUS调试工具 C#源码 包含MODBUS主站调试工具和MODBUS从站调试工具
- 万年历c语言代码3000年,求万年历代码!
- QT Icon设置异常
- linux服务器安装cuda,在Linux下安装Cuda5
- c语言岩石1ms,2017年注册岩土工程师基础考试真题下午和答案解析
- 不能设置 19寸显示 屏分辨率为 1440*900 的神器到来了
- .net Stream篇(五)
- (八)博客详情页面(内容排版typo.css)插件集成
- 消融实验(ablation study)是什么?