引言:当初自己为了在项目中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. EF--payload or not

    负载加载非负载加载适用于多对多场境. 一.非负载(payload-free)加载 1.1创建表 create table Album ( AlbumId ,), AlbumName ) ) creat ...

  2. traffic_light_bag_file 数据集 下载链接

    链接:https://pan.baidu.com/s/19p5aGRfs6iFtN_SWAxCkRQ 密码:v9wx

  3. ubuntu linux断点续传下载工具 uGet 的安装

    网址 http://ugetdm.com/downloads-ubuntu 使用命令行安装 sudo add-apt-repository ppa:plushuang-tw/uget-stable s ...

  4. sublime打开txt文件乱码的问题

    我们使用Sublime打开TXT文件的时候,会经常因为编码的问题造成乱码. 这是因为TXT记事本的默认保存编码格式是GBK,而Sublime text不支持GB2312和GBK编码. 我们可以通过安装 ...

  5. 解析xml文件,修改Jenkins的配置

    最近因为服务器移动,在Jenkins中配置的一些地址之类的,都要改变,如图,我因为使用插件Sidebar Links增加一个链接地址,现在地址变了,所以在Jenkins中配置就需要改动link url ...

  6. LA 3902 网络

    题目链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_ ...

  7. 【转】Android开发学习笔记(一)——初识Android

    对于一名程序员来说,“自顶向下”虽然是一种最普通不过的分析问题和解决问题的方式,但其却是简单且较为有效的一种.所以,将其应用到Android的学习中来,不至于将自己的冲动演变为一种盲目和不知所措. 根 ...

  8. 图像上采样(图像插值)增取样(Upsampling)或内插(Interpolating)下采样(降采样),

    缩小图像(或称为下采样(subsampled)或降采样(downsampled))的主要目的有两个:1.使得图像符合显示区域的大小:2.生成对应图像的缩略图.放大图像(或称为上采样(upsamplin ...

  9. Linux笔记(开机自动将kerne log保存到SD卡中)

    有时候为了测试机器的稳定性,需要煲机测试几天的情况,这个时候机器已经封装好,不能再接串口线出来. 为了追溯问题,就需要将log信息保存下来. 于是就需要这样一个功能:系统启动后,自动将kernel的l ...

  10. input或其他元素的左上角和左下角单独圆角实现

    border-bottom-left-radius:6px;/*左下角圆角*/    border-top-left-radius: 6px;/*左上角圆角*/