最近在做一个业务功能,根据后端传来的数据给每个不同的用户动态生成不同的pdf并下载。

  • 方案一、使用window.print()
    pass,打印出来的东西跟页面结构关联度太高,且不是pdf

  • 方案二、使用pdfmake 当然还有其他的jsPDF,这里我选择了pdfmake

一、先搞定能够下载PDF

  • github :官方说->pdfmake

  • Get Start

    <!doctype html>
    <html lang='en'>
    <head>
    <meta charset='utf-8'>
    <title>my first pdfmake example</title>
    <script src='build/pdfmake.min.js'></script>
    <script src='build/vfs_fonts.js'></script>
    </head>
    <body>
    

引入 pdfmake.min.js 引入 vfs_fonts.js 可到cdnjs里获取链接:cdnjs->

  • 创建内容

    var docDefinition = { content: 'This is an sample PDF printed with pdfMake' };
    
  • 下载、打开、打印内容

    pdfMake.createPdf(docDefinition).download();
    pdfMake.createPdf(docDefinition).open();
    pdfMake.createPdf(docDefinition).print();
    

然后这虽然可以下载,但是内容为中文时会乱码,以及需要设置样式,下面一一道来

二、解决中文乱码(使用自定义样式)

方案一

npm install pdfmake
  • 用一个现成含有中文的字体替换原来的node_modules/pdfmake/dist/vfs_font.js 这里有现成的方正黑体简体:进去下载vfs_font.js

  • js配置

    /*设置默认字体,放入变量docDefinition里,与content同作用域*/
    defaultStyle: {
    font: 'xxx'
    }
    /*设置字体 与变量docDefinition同作用域*/
    pdfMake.fonts = {
     Roboto: {
         normal: 'Roboto-Regular.ttf',
         bold: 'Roboto-Medium.ttf',
         italics: 'Roboto-Italic.ttf',
         bolditalics: 'Roboto-Italic.ttf'
     },
     /*这里是加入的微软雅黑字体*/
     xxx: {
         normal: '方正黑体简体.ttf',
         bold: '方正黑体简体.ttf',
         italics: '方正黑体简体.ttf',
         bolditalics: '方正黑体简体.ttf',
     }
    };
    

方案二

  • 创建一个vfs_fonts.js包含字体文件的新文件
  • pdfMake.fonts在你的JavaScript中分配
  • 指定doc-definition中的字体

主要就这三个步骤,现在拆分多个小步骤

1、git clone:官方官网的代码到本地 2、在clone下来的文件加中文字体文件:xx.ttf到 pdfmake\examples\fonts 目录下 3、npm install确保安装所有先决条件模块 4、安装gulp,我也是第一次用,其实没有那么复杂的。

npm install gulp -g

5、检查是否安装成功

gulp -v

6、打开gulpfile.js 看下require了哪些模块,依次(一次)安装 7、安装 gulp-cli,没有安装会报错

npm install gulp-cli -g

8、运行gulp buildFonts以创建新的build/vfs_fonts.js

gulp buildFonts

9、这个时候就获得了方案一现成的vfs_fonts.js 并替换包里的vfs_fonts.js 10、引入至JS,我这里使用的是Vue

import xxx from '../../node_modules/pdfmake/build/pdfmake.min.js';
import yyy from '../../node_modules/pdfmake/build/vfs_fonts';

11、配置使用,同方案一

三、样式排版

  • 参考这个网站,直接按照这个逻辑写就行了:戳这里->
  • 注意,既可以对所有类型设置统一的样式,也可以对每个类型单独设置权限更高的样式
  • 把获取的数据存入变量,直接放入pdfmake模板,就动态更新pdf内容了。