前端學習筆記：angular4中將html導出為pdf

ngular5中將html導出為pdf
1.安裝pdfmake：
npm install pdfmake --save
 

2.在ts文件中導入：
import * as pdfMake from 'pdfmake/build/pdfmake';
import * as pdfFonts from 'pdfmake/build/vfs_fonts';
3.測試pdfmake：
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，使用命令為

npm install gulp --save-dev;
d.安裝pdfmake所需要的依賴包，使用命令:

npm install;
e.將自己所需要的字體放在pdfmake目錄下的examples/fonts的目錄中;

f.然后在執行:

gulp buildFonts ;
g.f步驟完成后會在build 文件夾中找到vfs_fonts.js

h.用pdfmake項目中的vfs_fonts.js替換原來項目中的vfs_fonts.js

5.使用字體：(以“微軟雅黑”為例)
pdfMake.fonts = {
    微軟雅黑: {
        normal: '微軟雅黑.ttf',
        bold: '微軟雅黑.ttf',
        italics: '微軟雅黑.ttf',
        bolditalics: '微軟雅黑.ttf',
    }
};
var dd = { content:{text:"HelloWorld！",alignment: 'center',font: '微軟雅黑'};
pdfMake.createPdf(dd).download();
6.其他操作可以參考官網
https://juejin.im/