zoukankan      html  css  js  c++  java
  • 前端生成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

    如果运行上面的命令后,报 什么  apply 什么的  一个错误, 就 npm i gulp-cli -g  一下 ,应该就好了。

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

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

  • 相关阅读:
    Node 修改默认镜像源
    Mac下apache虚拟主机配置
    Grep命令出现 Binary file (standard input) matches
    idea取出方法参数提示
    Java8 Optional用法
    Codeforces Round #638 (Div. 2)
    Codeforces Round #637 (Div. 2)
    Codeforces Round #636 (Div. 3)
    Tree
    Educational Codeforces Round 85
  • 原文地址:https://www.cnblogs.com/taohuaya/p/10149366.html
Copyright © 2011-2022 走看看