|
hiprint打印table数据无法绑定解决办法 事件起因： 问题描述： hiprint使用教学： hiprint案例(附下载地址)： hiprint的依赖导入 案例代码解释： 事件起因： 因为前两天要弄一个a4纸的打印功能（嵌入在网页里面），结果前两天因为弄这个搞得挺恼火的，到笔者终于解决了这个问题后，特此来说明一下这个问题，以便后来者能够吸取经验教训 问题描述： 我所创建的一个空的vue项目，后面在这个里面加入hiprint进行数据的打印 整个项目的结构： 
我因为写的一个简单的数据表无法进行table表的数据绑定导致我花费了过多的时间进行查找问题，在网上查找的过程中也没有找到有效的案例 所以我提供了一个案例来展示给大家下载，方便大家进行对应的操作（在下面的案例板块） 如下图所示无法将对应的绑定的数据在打印单中进行显示 
hiprint使用教学： 首先去到它的官网：hiprint的官网：http:///demo 官网这个样子： 
将模板清空，自定义设计模板 
将对应的模块拖入编辑界面，需要注意字段的绑定,每一个组件都要绑定对应的字段名 
注意表格单列的绑定 
编辑好后它会自己隐藏对应列的绑定字段名称: 
将设计好的模板转换为对应的json串，以便复制到项目中的代码中去 
hiprint案例(附下载地址)： 样例项目 https://download.csdn.net/download/chirp_CQ/62427678 hiprint需要的css和js依赖: https://download.csdn.net/download/chirp_CQ/62429133 这下面是笔者自己写的一个模板然后将它导入到了一个全新的vue项目中（使用的是npm ui刚创建的vue项目，属于一个全新的vue项目），注意要发挥它的功能就需要相应的依赖包导入，建议自己学习导一下这些东西，在上面的样例项目下载中是已经导入好了相应的hiprint的css和js的，但建议大家自己导入一下 hiprint的依赖导入 具体导入过程如下： 首先：一个全新的vue项目的目录结构大致是这样的： 
将上面的hiprint的css和js下载下来，然后将整个文件夹放在上面这个目录下的public目录下 像这样： 
然后打开public目录下的index.html 将hiprint里面的css和js导入进来： 
<link rel="stylesheet" href="hiprint/hiprint.css"> <link rel="stylesheet" href="hiprint/print-lock.css"> <link rel="stylesheet" href="hiprint/print-lock.css" media="print"> <script src="hiprint/jq-3.31.js"></script> <script src="hiprint/polyfill.min.js"></script> <script src="hiprint/hiprint.bundle.js"></script> <script src="hiprint/jquery.hiwprint.js"></script> 到这儿就已经完成了一大半了 然后就是在app.vue中编写内容（这只是为了方便不怎么会vue的同学，以及会了的，可以去自己创建单独的vue文件，然后设置路由自己去实现跳转） 在上面的样例的 app.vue中的内容（能够将绑定的数据在打印单中进行显示）： <template> <div id="app"> <input type="button" value="资产打印" v-on:click="printTest" /> <div id="templateDesignDiv"></div> </div> </template> <script> export default { name: "app", data() { return { mypanel: { panels: [ { index: 0, paperType:'A4', height: 297, width: 210, paperHeader: 49.5, paperFooter: 780, printElements: [ { options: { left: 250.5, top: 19.5, height: 9.75, width: 120, title: "", field: "title", fontSize: 21, }, printElementType: { type: "text" }, }, { options: { left: 21, top: 87, height: 36, width: 550, field:'table1', columns: [ [ { title: "序号", field: "order", width: 63.16925398270368, colspan: 1, rowspan: 1, align: 'center', checked: true, }, { title: "资产编号", field: "assetcode", width: 135.06367330450615, colspan: 1, rowspan: 1, align: 'center', checked: true, }, { title: "资产名称", field: "assetname", width: 150.33805496131086, colspan: 1, rowspan: 1, align: 'center', checked: true, }, { title: "型号", field: "type", width: 116.81363313609468, colspan: 1, rowspan: 1, align: 'center', checked: true, }, { title: "数量", field: "num", width: 84.61538461538461, colspan: 1, rowspan: 1, align: 'center', checked: true, }, ] ], }, printElementType: { title: "表格", type: "tableCustom" }, }, { options: { left: -3, top: 66, height: 9, width: 597 }, printElementType: { type: "hline" }, }, { options: { left: 33, top: 49.5, height: 16.5, width: 120, title: "领用部门", field: "apartment", fontSize: 12, }, printElementType: { type: "text" }, }, { options: { left: 246, top: 49.5, height: 16.5, width: 120, title: "领用人", field: "userperson", fontSize: 12, }, printElementType: { type: "text" }, }, { options: { left: 450, top: 49.5, height: 16.5, width: 120, title: "领用时间", field: "getTime", fontSize: 12, }, printElementType: { type: "text" }, }, { options: { left: 96, top: 763.5, height: 9.75, width: 120, title: "领用人签字：", fontSize: 12, }, printElementType: { type: "text" }, }, { options: { left: 361.5, top: 763.5, height: 9.75, width: 150, title: "打印时间", field: "printTime", fontSize: 12, }, printElementType: { type: "text" }, }, ], paperNumberLeft: 565.5, paperNumberTop: 819, }, ] }, data: [ { order: 1, assetcode: "ZC123152131", assetname: "test_name", type: "1", num: "2", }, { order: 2, assetcode: "ZC123152131", assetname: "test_name", type: "1", num: "2", }, ] } }, mounted() {}, methods: { printTest() { let printData = { title: "资产领用单", apartment: "产品部", userperson: "测试使用人1", getTime: "2021.11.01", printTime: "", table1:this.data } // 打印模板的json //获取系统时间进行打印 let getDate = new Date(); printData.printTime = getDate.getFullYear()+'.'+getDate.getMonth()+'.'+getDate.getDay()+' '; hiprint.init(); //调用接口获取数据 var hiprintTemplate = new hiprint.PrintTemplate({ template: this.mypanel, settingContainer: "#templateDesignDiv", }); hiprintTemplate.print([printData]); }, }, }; </script> <style> </style> 案例代码解释： 注意数据绑定的内容：
数据绑定的内容解释：
在panels的打印模板中，进行的数据绑定与上图中printData中的数据字段名称进行绑定：
然后在终端执行 npm run serve，打开网页
打开页面，页面只有一个按钮：
点击打印按钮后：
至此，hiprint的基本的数据绑定和使用的小案例就到此结束了，谢谢 ———————————————— 版权声明：本文为CSDN博主「阿，葱来了-C is coming」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/chirp_CQ/article/details/121859785 |
|
|
