pdfmaker使用遇到的问题总结

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