pdfmake运用笔记

pdfmake运用笔记

pdfmake 是基于客户端服务器的 PDF 打印解决方案，完全基于 JavaScript 开发。提供强大的排版引擎

pdfmake官网:http://pdfmake.org/#/

pdfmake资源地址

<script src="http://cdn.bootcss.com/pdfmake/0.1.20/pdfmake.js"/>
<script src="http://cdn.bootcss.com/pdfmake/0.1.20/pdfmake.min.js"/>
<script src="http://cdn.bootcss.com/pdfmake/0.1.20/vfs_fonts.js"/>

记一下使用pdfmake生成pdf的实现方法。

官方提供3个文件pdfmake.js、pdfmake.min.js、vfs_fonts.js。

首先要设置pdf字体，官方提供的文件只有英文字体，需手动添加中文字体。

字体就添加了一个微软雅黑的普通字体，加粗和斜体没有添加

//pdf字体
        pdfMake.fonts = {
            Roboto : {
                normal : 'Roboto-Regular.ttf',
                bold : 'Roboto-Medium.ttf',
                italics : 'Roboto-Italic.ttf',
                bolditalics : 'Roboto-Italic.ttf'
            },
            微软雅黑 : {
                normal : 'msyh.ttf',
                bold : 'msyh.ttf',
                italics : 'msyh.ttf',
                bolditalics : 'msyh.ttf',
            }
        };

字体文件需储存在vfs_fonts.js文件中，需将字体文件转base64编码才可以添加
通过java将.ttf字体文件转base64编码

File file = new File("X:\\XXX.ttf");
FileInputStream is = null;
try {
    is = new FileInputStream(file);
    //输入流转字节数组
    data = InputStreamToByte(is);
} catch (IOException e) {
// TODO Auto-generated catch block
    e.printStackTrace();
}
// 对字节数组Base64编码  
BASE64Encoder encoder = new BASE64Encoder();  
String base64 = encoder.encode(data);

输入流转byte数组

private static byte[] InputStreamToByte(InputStream is) throws IOException {
        ByteArrayOutputStream bytestream = new ByteArrayOutputStream();
        byte[] buffer = new byte[1024];
        int ch;
        while ((ch = is.read(buffer)) != -1) {
            bytestream.write(buffer, 0, ch);
        }
        byte data[] = bytestream.toByteArray();
        bytestream.close();
        return data;
    }

pdf内容格式

var dd = {
    content: [
        'Hello word',
        {
        text: 'Hello word',
        style: 'one',
        },
        {
        text: 'Hello \nword'
        },{
        //分隔符
        columns: [
                {
                    width: 90,
                    text: '你好世界'
                },
                {
                    width: '*',
                    text: '你好世界'
                },
                {
                    columns:[
                        {text:'Hello word'},
                        {text:'你好世界',fontSize: 20}
                    ]
                },
            ]
        },
        //表格
        {
            table: {
                body: [
                    ['word','word','word','word'],
                    [{text:'word',colSpan:2},'','',{text:'word',rowSpan:3}],
                    [{text:'word',colSpan:2,rowSpan:2},'','word',''],
                    ['','','word',''],
                ]
            }
        },
        {
            ol:[
                'Hello word',
                '你好世界',
                {
                    ul: [
                        'Hello word',
                        '你好世界'
                    ]
                },
                'Hello word'
            ],
        },{
        //margin:[left,up,right,down]
            text:'Hello word 你好世界',
            margin:[100,100,100,100],
        }
    ],
    styles: {
        one: {
            fontSize: 24,
            alignment: 'center'
        }
    }
    defaultStyle : {
        font : '微软雅黑'
    }
};

最后可以将pdf打印或者下载

//pdf打印
pdfMake.createPdf(dd).print();
//pdf下载
pdfMake.createPdf(dd).download();

最终代码效果图