引言:当初自己为了在项目中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. IEnumerable<T> 用法

    //以下参考来自 http://www.cnblogs.com/wilber2013/p/4299529.html

  2. --disable-column-names,--skip-column-names,--column-names=0

    --disable-column-names,--skip-column-names,--column-names=0

  3. django choice字段模板展示

    class UserInfo(AbstractUserInfo): """ 用户表 """ gender_choice = ( (1,&qu ...

  4. HTML5开发必备工具

    现在除了移动APP开发之外,比较火的就是html5开发了,现阶段的HTML5被看做是Web开发者创建流行web应用的利器,增加了对视频和Canvas2D的支持,它的优点就是可以跨平台使用,比如你是开发 ...

  5. centos 7中磁盘挂载重启后挂载失效

     在centos 7磁盘挂载成功后,关机重启,挂载磁盘失效,需要重新挂载,不用重新挂载的开机挂载方法如下: 1.先检验要挂载的磁盘是否已被挂载,有的话先卸除 2.修改 /etc/fstab 文件 ,最 ...

  6. js call(),apply(),对象冒充,改变变量作用域

    1.apply(); function box(n1,n2){ return n1+n2; } function pox(n1,n2){ alert(box.apply(this,[n1,n2])); ...

  7. Linux终端(terminal)清屏命令

    windows CMD终端的清屏命令是cls Linux终端中的清屏命令有 1) clear 2) reset

  8. 利用XShell和WinSCP连接本机和Linux虚拟机——Kali部署

    1.XShell支持在本机直接连接Linux终端,加快速度,支持命令的复制粘贴 2.WinSCP 支持本机与Linux的文件复制粘贴 关键:使用SSH协议,所以要在Linux开启ssh服务,下面以Ka ...

  9. vuejs给组件绑定原生事件

    给组件绑定事件,该事件是自定义的事件 <div id='root'> <child @click='handleClick'></child> </div&g ...

  10. MapReduce计算每年最大值测试样例生成程序

    Demo.java package com.java; import java.io.BufferedWriter; import java.io.File; import java.io.FileW ...