首页 > Web开发 > 详细

JSPDF支持中文(思源黑体)采坑之旅,JSPDF中文字体乱码解决方案

时间:2019-09-10 12:21:27      阅读:1623      评论:0      收藏:0      [点我收藏+]

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

 

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

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

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

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

 

.技术分享图片

 

我们挑其中的SourceHanSans-Bold.ttfSourceHanSans-Normal.ttf来使用,代表一粗一细。

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

 

技术分享图片

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

技术分享图片

 

 

 

在这个网站进行转换https://rawgit.com/MrRio/jsPDF/master/fontconverter/fontconverter.html

注意,这个网站就算挂了,我们也可以在jspdf的源码里找到转换器 https://github.com/MrRio/jsPDF/blob/master/fontconverter/fontconverter.html

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

技术分享图片

 

 PS:字体是bold字体,网站的fontStyle你就选bold,normal也是这样!

 

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

技术分享图片

 

你的项目新建font.js,内容如下

export function addfont(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或者考虑使用默认一种字体~!

JSPDF支持中文(思源黑体)采坑之旅,JSPDF中文字体乱码解决方案

原文:https://www.cnblogs.com/ww01/p/11496213.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!