【hiprint】hiprint的使用方法(附使用案例)hiprint 表格数据传输问题解决办法

本文详细介绍了在Vue项目中使用hiprint遇到的表格数据绑定问题及其解决办法。通过hiprint官网学习模板设计,注意字段绑定,转换模板为JSON,并提供案例项目下载链接,包括所需CSS和JS依赖。在Vue项目中导入hiprint资源,实现数据绑定的打印功能。
摘要由CSDN通过智能技术生成

hiprint打印table数据无法绑定解决办法

事件起因:

因为前两天要弄一个a4纸的打印功能(嵌入在网页里面),结果前两天因为弄这个搞得挺恼火的,到笔者终于解决了这个问题后,特此来说明一下这个问题,以便后来者能够吸取经验教训

问题描述:

我所创建的一个空的vue项目,后面在这个里面加入hiprint进行数据的打印
整个项目的结构:
hiprint的vue项目的结构
我因为写的一个简单的数据表无法进行table表的数据绑定导致我花费了过多的时间进行查找问题,在网上查找的过程中也没有找到有效的案例
所以我提供了一个案例来展示给大家下载,方便大家进行对应的操作(在下面的案例板块)

如下图所示无法将对应的绑定的数据在打印单中进行显示
打印情况

hiprint使用教学:

首先去到它的官网:hiprint的官网:http://hiprint.io/demo
官网这个样子:
hiprint的官网
将模板清空,自定义设计模板
在这里插入图片描述
将对应的模块拖入编辑界面,需要注意字段的绑定,每一个组件都要绑定对应的字段名
在这里插入图片描述
注意表格单列的绑定
在这里插入图片描述
编辑好后它会自己隐藏对应列的绑定字段名称:
在这里插入图片描述
将设计好的模板转换为对应的json串,以便复制到项目中的代码中去
在这里插入图片描述

hiprint案例(附下载地址):

样例项目

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值