前端生成pdf文件之pdfmake.js

前端生成pdf文件之pdfmake.js

pdfmake.js是一个简单的生成pdf文件的插件。

pdfmake.js     https://files.cnblogs.com/files/s313139232/pdfmake.min.js

代码也很简单：

html文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>my first export PDF</title>
    <script src="pdfmake.min.js"></script>
    <script src="vfs_fonts.js"></script>
    <script>
        function down() {
            var dd = {
                content: [
                    '中英文测试',
                    'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
                ],
                defaultStyle: {
                    font: '方正姚体'
                }
            };
            pdfMake.fonts = {
                Roboto: {
                    normal: 'Roboto-Regular.ttf',
                    bold: 'Roboto-Medium.ttf',
                    italics: 'Roboto-Italic.ttf',
                    bolditalics: 'Roboto-Italic.ttf'
                },
                方正姚体: {
                    normal: 'FZYTK.TTF',
                    bold: 'FZYTK.TTF',
                    italics: 'FZYTK.TTF',
                    bolditalics: 'FZYTK.TTF',
                }
            };
            pdfMake.createPdf(dd).download();
        }
    </script>
</head>
<body>
<button onclick="down()">下载</button>
</body>
</html>

代码中会引用两个技术，pdfmake.min.js   vfs_fonts.js

　　其中pdfmake.min.js是pdfmake的支持文件，而vfs_fonts.js是字体文件（.ttf）打包成的js文件。

 

content中pdf的内容拼接：
　　内容拼接类似于html+css，但是写法为pdfmake插件自带，可以去pdfmake的github首页介绍中查看。

 

字体文件（.ttf）打包可以通过pdfmake的github上的源文件进行打包制作。

下面是两种字体的vfs_fonts.js文件：

方正姚体  https://files.cnblogs.com/files/s313139232/方正姚体vfs_fonts.js

Roboto-Itali   https://files.cnblogs.com/files/s313139232/Roboto-Italivfs_fonts.js

 

注意：中文的字体文件较大，打包出来多数都在10M以上，推荐方正姚体等ttf文件较小的字体进行打包。

打包教程：http://www.cnblogs.com/xrab/p/7210588.html

打包步骤：

1.在https://github.com/bpampuch/pdfmake下载pdfmake的源文件

2.在根目录用 npm 安装 gulp

npm install gulp --save-dev

3.安装pdfmake依赖包

npm install

4.在cmd运行打包examples/fonts中的.ttf文件的命令。

gulp buildFonts

5.然后在 build 文件中可以找到vfs_fonts.js文件。

由于字体打包文件较大，建议examples/fonts中的.ttf文件只放置一个字体文件。

 

posted @ 2017-09-18 20:56  莫小龙  阅读(13447)  评论(0)  编辑  收藏  举报