您的位置:首页 > Web前端 > AngularJS

前端学习笔记:angular4中将html导出为pdf

2018-04-24 22:50 447 查看

angular5中将html导出为pdf

1.安装pdfmake:

[code]npm install pdfmake --save

 

2.在ts文件中导入:

[code]import * as pdfMake from 'pdfmake/build/pdfmake';
import * as pdfFonts from 'pdfmake/build/vfs_fonts';

3.测试pdfmake:

[code]pdfMake.vfs = pdfFonts.pdfMake.vfs;
var dd = { content:{text:"HelloWorld!",alignment: 'center',};
pdfMake.createPdf(dd).download();

 

4.处理中文问题:

a.找到需要的字体文件(后缀.ttf);

b.将pdfmake的源代码克隆或下载到本地,(https://github.com/bpampuch/pdfmake);

c.进入pdfmake根目录,安装gulp,使用命令为

[code]npm install gulp --save-dev;

d.安装pdfmake所需要的依赖包,使用命令:

[code]npm install;

e.将自己所需要的字体放在pdfmake目录下的examples/fonts的目录中;

f.然后在执行:

[code]gulp buildFonts ;

g.f步骤完成后会在build 文件夹中找到vfs_fonts.js

h.用pdfmake项目中的vfs_fonts.js替换原来项目中的vfs_fonts.js

5.使用字体:(以“微软雅黑”为例)

[code]pdfMake.fonts = {
    微软雅黑: {
        normal: '微软雅黑.ttf',
        bold: '微软雅黑.ttf',
        italics: '微软雅黑.ttf',
        bolditalics: '微软雅黑.ttf',
    }
};
var dd = { content:{text:"HelloWorld!",alignment: 'center',font: '微软雅黑'};
pdfMake.createPdf(dd).download();

6.其他操作可以参考官网

 

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: