hiprint打印table数据无法绑定解决办法
事件起因：
因为前两天要弄一个a4纸的打印功能（嵌入在网页里面），结果前两天因为弄这个搞得挺恼火的，到笔者终于解决了这个问题后，特此来说明一下这个问题，以便后来者能够吸取经验教训
问题描述：
我所创建的一个空的vue项目，后面在这个里面加入hiprint进行数据的打印
整个项目的结构：
我因为写的一个简单的数据表无法进行table表的数据绑定导致我花费了过多的时间进行查找问题，在网上查找的过程中也没有找到有效的案例
所以我提供了一个案例来展示给大家下载，方便大家进行对应的操作（在下面的案例板块）
如下图所示无法将对应的绑定的数据在打印单中进行显示
hiprint使用教学：
首先去到它的官网：hiprint的官网：http://hiprint.io/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的基本的数据绑定和使用的小案例就到此结束了，谢谢
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/114559.html
