vue使用hiprint打印前端查询到的数据的详细过程_hiprint教程

1、打开模板设计地址，http://hiprint.io/design，设计完模板点击下面的按钮，生成json到testarea

2、在vue中引入hiprint.bundle.js文件，

3、创建一个js文件内容如下，把设计模板里面的生成的内容复制到括号里面

const templateInfo = {
    test:{}
}
 
export default templateInfo

下面的代码是我其中一个列的例子，field要与查询到的数据的字段名要一致

                    {
                        "title":"类型编号",
                        'field':"typeCode",
                        "width":118.12679288179476,
                        "colspan":1,"rowspan":1,
                        "checked":true
},

4、然后在vue中引入刚刚写好的js文件，import lianxi from "@/utils/lianxi";

5、设置一个按钮和按钮的点击事件，方法代码如下

print(){
    this.toPrint(this.$refs.printCons1)
}，
toPrint(ref, Rendering) {
                
    const hiprintTemplate = new hiprint.PrintTemplate({
       template: lianxi.test
        })
 
        // 给模板赋值
        const printData = {
            list: this.Data
       }
        hiprintTemplate.print(printData)
    },

new 的hiprint是刚刚引入的hiprint.bundle.js文件，Data是查询的数据，list是生成内容的表格的字段名。写完就大功告成了。

新手写的不好，望见谅。