Angualr6+ 将数据转换整合PDF文档导出或在线预览

前言：需要将自己的数据单或是图片等转换成PDF格式，可以在线预览与下载；所需pdfmakes和ng2-pdf-viewer；并且解决pdfmakes中文与中文符号乱码问题；

一、安装Pdfmakes

命令行：npm install pdfmake --save

二、在所用的.ts文件中导入引用：

import * as pdfMake from 'pdfmake/build/pdfmake';

import * as pdfFonts from 'pdfmake/build/vfs_fonts';

三、添加方法——Hello World

pdfmakes（）{

　　pdfMake.vfs = pdfFonts.pdfMake.vfs;

　　var dd = { content:{text:"HelloWorld！ ",alignment: 'center'};

　　pdfMake.createPdf(dd).download();

}

 

四、发现不兼容中文与中文符号；解决方法如下：

1.下载一个后缀为.ttf的字体文件  ——这里以 msyh.ttf （微软雅黑）为例；

2.下载pdfmake的源代码；地址：https://github.com/bpampuch/pdfmake

 

 3.解压并且打开该源码项目：安装gulp 输入命令行 npm install gulp --save-dev;  依赖包：npm install;

 4.将所用的 msyh.ttf文件放置pdfmake目录下的examples/fonts的目录中;

 

 

 5.执行命令行：gulp buildFonts; 重新编译vfs_fonts.js文件，位置在在build 文件夹中；

 6.若第五步命令行输入错误：“gulp : 无法将“gulp”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。”

　　i：解决在本地全局安装gulp 命令行为npm i -g gulp

　　ii: 再运行 npm i 即可解决

 7.将用pdfmake项目中的vfs_fonts.js中获取部分代码 拷贝至自己目标项目中vfs_fonts.js；

 

  从图中“msyh.ttf”开始到另一个“xx.ttf”之前为止的代码复制到 自己项目中的vfs_fonts.js ：

 

8.修改.ts 方法：

pdfmakes（）{

　　pdfMake.vfs = pdfFonts.pdfMake.vfs;

　　pdfMake.fonts = {

   　　 msyh: {

       　　 normal: 'msyh.ttf',

      　　  bold: 'msyh.ttf',

       　　 italics: 'msyh.ttf',

        　　bolditalics: 'msyh.ttf',

   　　 }

　　};

　　var dd = {

　　　　content:{text:"9月份采购单",alignment: 'center',font:'msyh'}

　　};

　　pdfMake.createPdf(dd).download();

}

这样就解决中文乱码问题；

五、PDF格式编制：可以参考官方网站的代码内容，地址：http://pdfmake.org/playground.html

 

 注意原网站style 是默认原先的.ttf 也就是中文乱码的font；注意改成自己的font即可；

六、在线PDF预览：ng2-pdf-viewer

具体步骤可以参考官方网站：https://www.npmjs.com/package/ng2-pdf-viewer

还是比较详细的；觉得有帮助的同学顶下！