引言:当初自己为了在项目中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. ListView优化的时候ViewHolder的简洁写法

    在ListVIew做复用优化的时候,经常会写ViewHolder,还需要很麻烦的去findview,我最讨厌写一堆的这样代码了,今天看到了一个极简的写法,很好用,很简洁啊!!! public stat ...

  2. Eclipse JSP 页面设置 charset=UTF-8

    windows —> Preferences —> 搜索框中输入:JSP,设置如下:

  3. ajax请求传过来的json数据直接转成对应的实体类时出错:400 Bad Request 不进入controller

    今天开发过程中,在SpringMVC中的Action中处理前台ajax请求传过来的json数据直接转成对应的实体类时出错:400 Bad Request,后台也不报错,400指的的是请求无效(请求有语 ...

  4. win2008 配置TLS1.2

    配置TLS1.2 提供两种方法, 选择其中一种就行了 1.手动设置 找到HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SecurityProv ...

  5. Mercurial (hg)

    附上两个站点: http://z42.readthedocs.org/zh/latest/devtools/hg.html http://bucunzai.net/hginit/ Mercurial( ...

  6. Selenium入门系列3 单个元素的定位方法

    UI自动化首先要识别对象,再操作对象,最后判定实际结果与预期结果是否一致. 这一节学习的是识别单个对象,webdriver提供了8种方式. <a id="idofa" cla ...

  7. 解决Jenkins的错误“The Server rejected the connection: None of the protocols were accepted”

    1. 配置节点,配置好节点后,在节点机上运行已下载文件,双击执行,提示"The Server rejected the connection: None of the protocols w ...

  8. http主要内容流程介绍

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

  9. sz 命令

    sz命令 下载文件命令 sz  文件名

  10. jdk8环境变量 jdk8图解安装 java8安装

    JDK8 是JDK的最新版本,加入了很多新特性,如果我们要使用,需要下载安装: JDK8在windows xp下安装有点问题,所以在WIN7下安装 WIN7操作系统有32位和64位,分别要下载对应的J ...