Angular 集成Pdfmaker
1 npm install pdfmake
2 安装完成之后调用
import * as pdfMake from ‘pdfmake/build/pdfmake.js’;
import * as pdfFonts from ‘pdfmake/build/vfs_fonts.js’;
引入
pdfMake.vfs = pdfFonts.pdfMake.vfs;
字符集设置
let docDefinition = { content: ‘This is an sample PDF printed with pdfMake’ };
pdf内容
pdfMake.createPdf(docDefinition).download();
pdfMake.createPdf(docDefinition).open();
pdfMake.createPdf(docDefinition).print();
pdf使用
pdf加图片(需要转码)
printPDF() {
this.getUrlBase64(‘assets/layout/images/seal/timg111.png’, function (base64) {
const docDefinition = {
content: [{
stack: [‘网上银行回执单’],
style: ‘header’
}, {text: ‘回执单编号:0000008’, style: ‘num’},
{
style: ‘tableExample’,
table: {
widths: [’’, '’, ‘’, '’],
heights: 20,
body: [
[‘转账日期’, ‘2018年8月15日’, ‘转账时间’, ‘12时12分12秒’],
[‘转出户名’, ‘小王’, ‘转入户名’, ‘小八’],
[‘转出账号’, ‘88888888’, ‘转入账号’, ‘66666666’],
[‘转出银行’, ‘建设银行’, ‘转入银行’, ‘招商银行’],
[‘转账币种’, ‘CNY’, ‘转账金额’, ‘100000000’],
[‘转账金额大写’, {colSpan: 3, text: ‘一亿元整’}],
[‘手续费支付方式’, ‘转出方支付手续费’, ‘手续费金额’, ‘1000’],
[‘汇款附言’, {colSpan: 3, text: ‘’}],
[‘银行盖章’, {
colSpan: 3, image: base64,
width: 50, alignment: ‘center’
}],
]
},
layout: {
fillColor: function (rowIndex, node, columnIndex) {
return (columnIndex % 2 === 0) ? '#cae7eb' : null;
},
hLineWidth: function (i, node) {
return (i === 0 || i === node.table.body.length) ? 1 : 1;
},
vLineWidth: function (i, node) {
return (i === 0 || i === node.table.widths.length) ? 1 : 1;
},
hLineColor: function (i, node) {
return '#979be8';
/*return (i === 0 || i === node.table.body.length) ? 'black' : 'gray';*/
},
vLineColor: function (i, node) {
return '#979be8';
/*return (i === 0 || i === node.table.widths.length) ? 'black' : 'gray';*/
},
/*defaultBorder: false,*/
},
/*layout: 'lightHorizontalLines'*/
},
],
styles: {
header: {
fontSize: 18,
bold: true,
color: 'red',
alignment: 'center',
margin: [0, 0, 0, 0]
},
tableExample: {
fontSize: 10,
margin: [0, 0, 10, 0],
border: '1px solid green'
},
num: {
fontSize: 8,
color: 'black',
margin: [0, 0, 0, 5]
}
},
};
pdfMake.createPdf(docDefinition).open();
});
}
getUrlBase64(url, callback) {
let canvas = document.createElement('canvas'); // 创建canvas DOM元素
let ctx = canvas.getContext('2d');
let img = new Image;
img.crossOrigin = 'Anonymous';
img.src = url;
img.onload = function () {
canvas.height = 500; // 指定画板的高度,自定义
canvas.width = 300; // 指定画板的宽度,自定义
ctx.drawImage(img, 0, 0, 300, 500); // 参数可自定义
let dataURL = canvas.toDataURL('image/png');
callback.call(this, dataURL); // 回掉函数获取Base64编码
canvas = null;
};
}
pdfmarker默认的字符是不认识中文的,所以我们需要加入对中文的支持。
在pdfmake/build/vfs_fonts.js替换成新的vfs_fonts.js,字体是微软雅黑
在pdfmake/build/pdfmake.js内需要对新字体进行配置
原来的
var defaultClientFonts = {
Roboto: {
normal: ‘Roboto-Regular.ttf’,
bold: ‘Roboto-Medium.ttf’,
italics: ‘Roboto-Italic.ttf’,
bolditalics: ‘Roboto-MediumItalic.ttf’
}
};
改成
var defaultClientFonts = {
Roboto: {
normal: ‘msyh.ttf’,
bold: ‘msyh.ttf’,
italics: ‘msyh.ttf’,
bolditalics: ‘msyh.ttf’
}
};
因为支持中文的字体包vfs_fonts.js太大,打包的时候可能会出现内存溢出的现象
报错:FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory
这时我们需要扩展一下虚拟内存
npm install -g increase-memory-limit
increase-memory-limit
在 .bin目录下执行ng build –prod就可以打包好了
注意是.bin目录下打包。
Pdfmaker下有example可供参考;
附:中文乱码处理 js 链接:https://pan.baidu.com/s/18mmlKDYmW3D_C0KNx0ZLMQ
提取码:5m3g