【hiprint】hiprint的使用方法（附使用案例）hiprint表格数据传输问题解决办法.pdf

该【【hiprint】hiprint的使用方法（附使用案例）hiprint表格数据传输问题解决办法 】是由【小屁孩】上传分享，文档一共【8】页，该文档可以免费在线阅读，需要了解更多关于【【hiprint】hiprint的使用方法（附使用案例）hiprint表格数据传输问题解决办法 】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。【hiprint】hiprint的使??法(附使?案例)hiprint表格数据传输问题解决办法hiprint打印table数据?法绑定解决办法事件起因:因为前两天要弄?个a4纸的打印功能(嵌?在?页??),结果前两天因为弄这个搞得挺恼?的,到笔者终于解决了这个问题后,特此来说明?下这个问题,以便后来者能够吸取经验教训问题描述:我所创建的?个空的vue项?,后?在这个??加?hiprint进?数据的打印整个项?的结构:我因为写的?个简单的数据表?法进?table表的数据绑定导致我花费了过多的时间进?查找问题,在?上查找的过程中也没有找到有效的案例所以我提供了?个案例来展?给?家下载,?便?家进?对应的操作(在下?的案例板块)如下图所??法将对应的绑定的数据在打印单中进?显?hiprint使?教学:hiprint案例(附下载地址):这下?是笔者??写的?个模板然后将它导?到了?个全新的vue项?中(使?的是npmui刚创建的vue项?,属于?个全新的vue项?),注意要发挥它的功能就需要相应的依赖包导?,建议??学****导?下这些东西,在上?的样例项?下载中是已经导?好了相应的hiprint的css和js的,但建议?家??导??下hiprint的依赖导?具体导?过程如下:?先:?个全新的vue项?的?录结构?致是这样的:将上?的hiprint的css和js下载下来,然后将整个?件夹放在上?这个?录下的public?录下像这样:然后打开public???的css和js导?进来:<linkrelstylesheethrefhiprint/<linkrelstylesheethrefhiprint/print-<linkrelstylesheethrefhiprint/print-<scriptsrchiprint/jq-><scriptsrchiprint/><scriptsrchiprint/><scriptsrchiprint/>到这?就已经完成了??(这只是为了?便不怎么会vue的同学,以及会了的,可以去??创建单独的vue?件,然后设置路由??去实现跳转)在上?(能够将绑定的数据在打印单中进?显?):<template><dividapp<inputtypebuttonvalue资产打印clickprintTest/><dividtemplateDesignDivdiv></div></template><script>exportdefault{name:,data(){data(){return{mypanel:{panels:[{index:0,paperType:'A4',height:297,width:210,paperHeader:,paperFooter:780,printElements:[{options:{left:,top:,height:,width:120,title:,field:,fontSize:21,},printElementType:{type:},},{options:{left:21,top:87,height:36,width:550,field:'table1',columns:[[{title:序号,field:,width:,colspan:1,rowspan:1,align:'center',checked:true,},{title:资产编号,field:,width:,colspan:1,rowspan:1,align:'center',checked:true,},{title:资产名称,field:,width:,colspan:1,rowspan:1,align:'center',checked:true,},{title:型号,field:,width:,colspan:1,rowspan:1,align:'center',checked:true,},{title:数量,field:,width:,colspan:1,rowspan:1,align:'center',checked:true,},]],},},printElementType:{title:表格,type:},},{options:{left:-3,top:66,height:9,width:597},printElementType:{type:},},{options:{left:33,top:,height:,width:120,title:领?部门,field:,fontSize:12,},printElementType:{type:},},{options:{left:246,top:,height:,width:120,title:领??,field:,fontSize:12,},printElementType:{type:},},{options:{left:450,top:,height:,width:120,title:领?时间,field:,fontSize:12,},printElementType:{type:},},{options:{left:96,top:,height:,width:120,title:领??签字:,fontSize:12,},printElementType:{type:},},{options:{left:,top:,height:,width:150,title:打印时间,field:,fontSize:12,},printElementType:{type:},},],paperNumberLeft:,paperNumberTop:819,},]},data:[{order:1,assetcode:,assetname:,type:,num:,},},{order:2,assetcode:,assetname:,type:,num:,},]}},mounted(){},methods:{printTest(){letprintData={title:资产领?单,apartment:产品部,userperson:测试使??,getTime:,printTime:,table1:}//打印模板的json//获取系统时间进?打印letgetDate=newDate();=()+'.'+()+'.'+()+'';();//调?接?获取数据varhiprintTemplate=({template:,settingContainer:,});([printData]);},},};</script><style></style>案例代码解释:注意数据绑定的内容:数据绑定的内容解释:在panels的打印模板中,进?的数据绑定与上图中printData中的数据字段名称进?绑定:然后在终端执?npmrunserve,打开?页打开页?,页?只有?个按钮:点击打印按钮后:?此,hiprint的基本的数据绑定和使?的?案例就到此结束了,谢谢