安装

1. 将printJS文件夹放入utils文件夹中
2. 在main.js中加入
    // 此路径需要你们自己注意
    import printJS from '@/utils/printJS/src/index';
    Vue.prototype.$printJS = printJS;

封装的printJS用法(自定义的属性)，需要查看插件内置属性请参考 printjs.crabbly.com/

headerRow (默认一级表头)

    @param {* Number } headerRow 表头的行数 例如:2级表头 -> headerRow:2 (目前只有1，2级，不传默认为1级)

properties （二级表头需要 headerRow:2）

    假设后端返回数据 let someJSONdata = [{operationType:1, operationDate:'2020-01-20', operationA:'我是你爸爸'}]
    field 代表属性, displayName 代表表头名称

一级表头使用，properties规则(直接看文档就行)

    properties: [
        { field: "operationType", displayName: "发言类型" },
        { field: "operationContent", operationA: "发言内容" },
        { field: "operationContent", operationDate: "发言时间" },
    ]
    ---------------------------------
    发言类型    发言内容     发言时间
    ---------------------------------
    1          我是你爸爸   2020-01-20   
    ----------------------------------

二级表头使用，properties规则

    let  properties = [
        {
            field: "operationType",
            displayName: "发言类型",
        },
        {
        field: "operationContent",
        displayName: "操作",
        sonProperties: [
            { field: "operationA", displayName: "发言内容"},
            { field: "operationDate", displayName: "发言时间" },
        ],
        },
    ]
    this.$printJS({
        printable: someJSONdata,
        properties:properties,
        type: "json",
        headerRow: 2,
    });
    
    ----------------------------------
                        操作
    发言类型 -------------------------
                发言内容    发言时间   
    ----------------------------------
    1           我是你爸爸   2020-01-20
    ----------------------------------

endPage (默认为"")

    @param {* String } endPage 结尾需要添加的HTML 例如:需要加页脚 -> endPage:'<h3>我是页脚</h3>

    this.$printJS({
    printable: someJSONdata,
    properties: [
        { field: "operationType", displayName: "发言类型" },
        { field: "operationContent", operationA: "发言内容" },
        { field: "operationContent", operationDate: "发言时间" },
    ],
    type: "json",
    headerRow: 2,
    endPage:'<h3>我是页脚</h3>'
    });

    ---------------------------------
    发言类型    发言内容     发言时间
    ---------------------------------
    1          我是你爸爸   2020-01-20   
    ----------------------------------
    我是页脚

合并行属性 listRow(默认为 null),colSpan(默认为 null) [一般只用做合并行]

listRow 从第几个开始合并,colSpan 需要合并几个(和listRow联合使用)

    @param {* Number } listRow 从第几个开始合并 例如:从第2个开始合并 -> listRow:3
    @param {* Number } colSpan 需要合并几个 例如:从第2个开始合并 -> colSpan:2
    假设后端返回数据 
    let someJSONdata =  [{operationType:1, operationDate:'2020-01-20', operationA:'我是你爸爸'}]
    this.$printJS({
    printable: someJSONdata,
    properties: [
        { field: "operationType", displayName: "发言类型" },
        { field: "operationContent", operationA: "发言内容" },
        { field: "operationContent", operationDate: "发言时间" },
    ],
    type: "json",
    headerRow: 2,
    // 最后一行
    listRow:someJSONdata.length,
    // 合并两列
    colSpan:2
    endPage:'<h3>我是页脚</h3>'
    });

    properties: [
        { field: "operationType", displayName: "发言类型" },
        { field: "operationContent", operationA: "发言内容" },
        { field: "operationContent", operationDate: "发言时间" },
    ]
    --------------------------------
    |发言类型 | 发言内容 | 发言时间   |
    --------------------------------
    |1                  | 2020-01-20| 
    --------------------------------