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是生成内容的表格的字段名。写完就大功告成了。
新手写的不好,望见谅。