引言:当初自己为了在项目中bootstrap-table中实现导出pdf,使用的pdfmake,但是pdfmake默认使用的不是中文字体,实现pdfmake使用中文字体主要就是编译新的vfs_fonts.js代替原来vfs_fonts.js文件引入到前端页面中,为了编译出新的字体文件,我也查了很多资料,多数都说用grunt重新打包examples\fonts下的文件,但是经我本人实验pdfmake 0.1.31版本的源代码根本没有grunt的管理配置文件,所以使用grunt是不行的,github的说明文档使用的是gulp,我使用之后,证明是可行。本人在做这些操作之前,对node.js、grunt、gulp知道一点点概念,从未有过实践。所以这篇博客的目的就是为了帮助新手实现pdfmake的汉化支持。

操作系统:Windows

操作步骤:

  1、安装node.js,网上的安装方法很多,比较简单,这里就不多说了

  2、下载pdfmake的源代码、下载地址https://github.com/bpampuch/pdfmake,下载之后解压到本地目录,如我的源代码目录:D:\download\chrome\pdfmake-master

  3、在源代码根目录下安装gulp:

  • 打开cmd命令窗口,定位到源代码根目录,如:cd D:\download\chrome\pdfmake-master
  • (这一步不着急执行,看完看下一条)执行npm install gulp命令,安装gulp到源代码根目录下,安装完之后会发现,源代码根目录下多了一个node_modules目录,目录下就可以发现刚才安装的gulp模块,node_modules目录是专门存放node.js模块的,gulp是其中的一个模块,如下图
  • 执行上面之后,可以执行gulp -v查看一下gulp版本,我执行了一下这个,提示gulp不是内部命令,可能npm install gulp安装到本地不行(不懂,没有细去纠结),我就又执行npm install -g gulp安装到全局,安装完成之后,执行gulp -v显示gulp版本号则说明安装成功

  4、利用gulp打包字体ttf文件到vfs_fonts.js文件中

  • gulp安装成功后,查看源代码根目录下的gulpfile.js,发现gulp编译还依赖了很多其他的模块,所以需要一一安装,没办法所以得一一安装:npm install webpack-stream、npm install gulp-uglify 等等

  • 从本地 C:\Windows\Fonts 下拷贝一个中文字体到D:\download\chrome\pdfmake-master\examples\fonts目录下,并删除fonts目录下原来的ttf文件,这里有一个坑,中文字体都很大,囧。我选了一个最小的“方正姚体 常规”

  • 上一步完成之后,cmd定位到代码根目录,执行gulp buildFonts,我这里又提示如下图,于是我又安装了下图依赖的模块npm install jshint,安装完成之后在执行gulp buildFonts,ok,提示字体打包成功了

  • 上一步完成之后,字体打包生成的vfs_fonts.js会覆盖源代码根目录的build目录下的vfs_fonts.js文件,这时需要将vfs_fonts.js拷贝到你的项目当中替换原来的vfs_fonts.js,并引用的html页面中

  5、修改js文件,将自定义的字体添加到pdfMake创建PDF的配置当中

  • 这一步因为我用到了tableExport.js来实现导出doc、Excel、PDF等不同类型,修改tableExport.js里面的代码,修改配置中的pdfmak的enabled值为true,还要修改fonts字体配置,把你的新字体添加进去

  • 上面步骤不是使用的tableExport.js的话,可以直接修改pdfMake.js的源代码,参考https://github.com/bpampuch/pdfmake/wiki/Custom-Fonts---client-side

  • ok,完成结果展示

遗留问题:中文字体都比较大,将字体打包到vfs_fonts.js当中,在页面当中引入一个几M到十几M大小的js文件成了一个巨大的痛点,不知道有没有大神解决了这个问题......

  

pdfmake实现中文支持,解决中文乱码问题的更多相关文章

  1. Centos6.5安装中文支持和中文输入法---VIM编辑器中文支持

    Centos6.5安装中文支持和中文输入法 第一步:中文支持:    在shell命令下输入: # vi  /etc/sysconfig/i18n 然后修改LANG="en_US.UTF-8 ...

  2. Centos6.5安装中文支持和中文输入法

     先来讲中文支持:    之前在网上查了不少资料,很多网友在网上都说,在shell命令下输入: # vi /etc/sysconfig/i18n 然后修改LANG="en_US.UTF-8& ...

  3. 读取zip文件,不解压缩直接解析,支持文件名中文,解决内容乱码

    使用ant.jar进行文件zip压缩 import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import j ...

  4. centos 解决中文支持问题, 如此修改可以修正eclipse 乱码问题。

    一.中文支持 安装中文语言包: yum groupinstall chinese-support 修改字符编码配置,没有这个文件就创建它: vim /etc/sysconfig/i18n 为 LANG ...

  5. sass文件转css时注释虽然支持中文,但是出现乱码的解决方法

    sass文件转css时注释虽然支持中文,但是出现乱码的解决方法 Scss 注释中文报错问题(windows系统, 已解决)找到ruby的安装目录,里面也有sass模块,类似这样样的路径:F:\Prog ...

  6. 【Linux】让Ubuntu 支持 GBK等字符集,解决中文乱码

    对GBK,GB2312,GB18030字符集的支持是UBUNTU中文乱码的罪魁祸首,其实我们可以在保持UTF-8为默认编码的条件下添加对这几个编码的支持,以解决中文乱码问题. 我想这个问题肯定有其他人 ...

  7. PHP生成PDF完美支持中文,解决TCPDF乱码

    PHP生成PDF完美支持中文,解决TCPDF乱码 2011-09-26 09:04 418人阅读 评论(0) 收藏 举报 phpfontsheaderttfxhtml文档 PHP生成PDF完美支持中文 ...

  8. 增加UBUNTU字符集 解决中文乱码问题

    对GBK,GB2312,GB18030字符集的支持是UBUNTU中文乱码的罪魁祸首,其实我们可以在保持UTF-8为默认编码的条件下添加对这几个编码的支持,以解决中文乱码问题. 我想这个问题肯定有其他人 ...

  9. Sublime Text 2—解决中文乱码

    Sublime Text 2是一个非常棒的代码及文本编辑器,绿色小巧.速度飞快,跨平台支持Win/Mac/Linux,支持32与64位,支持各种流行编程语言的语法高亮.代码补全等,有着许多其他编辑器没 ...

  10. vim(5)vim下wimrc的配置,解决中文乱码问题

    解决linux下vim乱码的情况:(修改vimrc的内容) 全局的情况下:即所有用户都能用这个配置 文件地址:/etc/vimrc 在文件中添加: ,ucs-bom,gb18030,gbk,gb231 ...

随机推荐

  1. 【起航计划 014】2015 起航计划 Android APIDemo的魔鬼步伐 13 App->Activity->Translucent 半透明Activity Theme.Translucent

    Activity分类示例的最后几个例子是来显示半透明Activity.例子大同小异.实现Activity的半透明效果主要是通过Style和Theme来实现的. 看看TranslucentActivit ...

  2. 【起航计划 009】2015 起航计划 Android APIDemo的魔鬼步伐 08 App->Activity->QuickContactsDemo 联系人 ResourceCursorAdapter使用 QuickContactBadge使用

    QuickContactsDemo示例介绍了如何使用Content Provider来访问Android系统的Contacts 数据库. Content Provider为不同应用之间共享数据提供了统 ...

  3. BarCode条形码生成库

    一.Barcode生成条形码的类库 二.示例 新建mvc空项目,添加Nuget引用 主要代码 // // GET: /Home/ public FileContentResult Index() { ...

  4. 搭建日志环境并配置显示DDL语句

    现在一般用log4j用的比较多,用slf4j用的比较少,所有这里我们就不用 hibernate内置的slf4j了. 用到slf的接口,log4j的实现. 要在hibernate中使用log4j,如图所 ...

  5. 用户管理的设计--4.jquery的ajax实现登录名的校验

    页面效果 鼠标失去焦点时,不需要刷新页面进行校验,判断登录名是否重复. 实现步骤 1.引入struts2-json-plugin-2.5.10.1插件包 2.页面使用jquery的ajax实现后台校验 ...

  6. Angular2、4入门基础知识(小的概念)

    1. 使用引用符来格式化HTML代码. @Component({ selector: 'app-heroes', templateUrl: './heroes.component.html', sty ...

  7. SINAMICS S120/S120 EPOS 基本定位修改方向

    步骤 修改 P1821 (在线修改需要P10=3) 修改完成,copy ram to rom / load to PG

  8. http主要内容流程介绍

    从这张图可以看出,从输入网址,按下回车的那一刻起,就开始了Redirect,那么为什么一开始就redirect呢?因为我们的浏览器可能记录了你的这个地址,以及永久跳转成一个新的地址了,所以一开始浏览器 ...

  9. vuejs作用域插槽

    作用域插槽 <div id='root'> <child> <template slot-scope='props'> <h1>{{props.item ...

  10. update_TypeError

    TypeError: ( 'An update must have the same type as the original shared variable ( shared_var=W, shar ...