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

作者：你好赵伟 | 2024-05-27 01:43:53

踩

hiprint

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

事件起因：

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

问题描述：

我所创建的一个空的vue项目，后面在这个里面加入hiprint进行数据的打印
整个项目的结构：
hiprint的vue项目的结构
我因为写的一个简单的数据表无法进行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项目的目录结构大致是这样的：
vue项目的结构
将上面的hiprint的css和js下载下来，然后将整个文件夹放在上面这个目录下的public目录下
像这样：
在这里插入图片描述
然后打开public目录下的index.html 将hiprint里面的css和js导入进来：
index.html导入依赖

	<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>
1
2
3
4
5
6
7
8

到这儿就已经完成了一大半了
然后就是在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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209

案例代码解释：

注意数据绑定的内容：
vue
数据绑定的内容解释：
在这里插入图片描述
在panels的打印模板中，进行的数据绑定与上图中printData中的数据字段名称进行绑定：

然后在终端执行 npm run serve，打开网页

打开页面，页面只有一个按钮：

点击打印按钮后：

至此，hiprint的基本的数据绑定和使用的小案例就到此结束了，谢谢

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】