Vue实现浏览器打印功能的代码

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
<template>
 <div>
  <div >
   <!-- 分页 -->
   <div class='tab_company_out'>
    <table cellpadding='0' cellspacing='0'>
     <tr>
      <th width='5%'>用户昵称</th>
      <th width='25%'>归属部门</th>
      <th width='5%'>手机号码</th>
      <th width='10%'>邮箱</th>
      <th width='5%'>用户名称</th>
      <th width='8%'>用户性别</th>
      <th width='8%'>状态</th>
      <th width='12%'>岗位</th>
      <th width='12%'>角色</th>
      <th width='10%'>备注</th>
     </tr>
     <!-- 每页显示onePageRow条数据 -->
     <tr >
      <td>{{tableData.nickName}}</td>
      <td>{{tableData.deptId}}</td>
      <td>{{tableData.phonenumber}}</td>
      <td>{{tableData.email}}</td>
      <td>{{tableData.userName}}</td>
      <td>{{tableData.sex}}</td>
      <td>{{tableData.status}}</td>
      <td>{{tableData.userName}}</td>
      <td>{{tableData.userName}}</td>
      <td></td>
     </tr>

    </table>

   </div>
  </div>
 </div>
</template>


<script>
export default {
 name: "printUser",
 // 制作打印模版组件时，props区域尽量保留。
 props: {
 // 接受的打印数据
 tableData: {},

 // 每页多少行
 onePageRow: {
  type: Number,
  default: 5
 },
 // 是否插入空白行
 blankLines: {
  type: Boolean,
  default: true
 },
 getChineseNumber: Function // 求数字的中文写法，从easyPrint组件传入
 },
 computed: {
 pages() {
  console.log(this.tableData);
  // 求当前数据能打印的页数
  /* var pages_ = Math.ceil(this.tableData.detail.length / this.onePageRow); // 向上取整数*/
  // return pages_ <= 0 ? 1 : pages_;
  return 1;
 },
 chineseTotal() {
  // 计算中文合计，如果忘记传入
  return this.getChineseNumber != null
  ? this.getChineseNumber(this.tableData.total_amount)
  : "您还没有传入getChineseNumber";
 }
 },

 methods: {

 test() {
  console.log("21111111111111");
  console.log("test");
 }
 }
};
</script>

<style scoped>
* {
 padding: 0;
 margin: 0;
 list-style-type: none;
 font-family: "微软雅黑";
 font-size: 12px;
}

.tab_company_out {
 text-align: center;
 width: 100%;
 margin: auto;
 page-break-after: always;
}

h3 {
 font-size: 14px;
}

.dan {
 text-align: center;
 position: relative;
}

.dan span {
 position: absolute;
 right: 0;
}

p {
 overflow: hidden;
 padding: 10px 0;
}

p span {
 float: left;
}

p span ins {
 text-decoration: underline;
}

p time {
 float: right;
}

table {
 width: 100%;
 border: none;
 border-bottom: 1px solid #000;
}

table tr td {
 border: 1px solid #000;
 border-bottom: none;
 border-right: none;
 height: 20px;
 line-height: 20px;
}

table tr td:last-of-type,
table tr th:last-of-type {
 border-right: 1px solid #000;
}

table tr th {
 border-top: 1px solid #000;
 border-left: 1px solid #000;
 height: 22px;
 line-height: 22px;
 font-size: 12px;
}

table tr th:nth-child(2) {
 width: 0;
}

.lu {
 display: inline-block;
 padding-top: 10px;
}

.lu li {
 float: left;
 text-align: left;
 margin-right: 15px;
}

.lu li label {
 width: 100px;
 display: inline-block;
}

.lu li:last-of-type {
 margin-right: 0;
}

@page{
 size: auto A4 landscape;
 margin: 3mm;
}
</style>

1
2
3
4
5
6
7
8
el-button size="mini" type="text" icon="el-icon-edit" 
 @click="printDemo(scope.row)" v-hasPermi="['system:user:edit']" >打印
    **<vue-easy-print** tableShow ref="easyPrint" v-show="false" >
     <template slot-scope="func">
     **<print-user** :getChineseNumber="func.getChineseNumber" :tableData="tabledata">**</print-user>**
     </template>
    **</vue-easy-print>**
 </el-button>

1
2
3
4
5
6
7
8
9
10
11
12
printDemo(row) {
  this.reset();
  const userId = row.userId || this.ids;
  getUser(userId).then(response => {
  this.tabledata = response.data;
  //注：此处使用延时的原因是，防止点击打印都，打印内容还未渲染到模板，导致打印页面显示空白。
  setTimeout(() =>{
   this.$refs.easyPrint.print();
  },100);
  });

 },

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
export default {
 name: "printUser",
 // 制作打印模版组件时，props区域尽量保留。
 props: {
 // 接受的打印数据，此处父子组件传值，在子组件（模板）定义一个对象（若为集合或者其他类型，自行定义）tableData，用于接收父组件传递的值，
 tableData: {},

 // 每页多少行
 onePageRow: {
  type: Number,
  default: 5
 },
 // 是否插入空白行
 blankLines: {
  type: Boolean,
  default: true
 },
 getChineseNumber: Function // 求数字的中文写法，从easyPrint组件传入
 },
 computed: {
 pages() {
  console.log(this.tableData);
  // 求当前数据能打印的页数
  /* var pages_ = Math.ceil(this.tableData.detail.length / this.onePageRow); // 向上取整数*/
  // return pages_ <= 0 ? 1 : pages_;
  return 1;
 },
 chineseTotal() {
  // 计算中文合计，如果忘记传入
  return this.getChineseNumber != null
  ? this.getChineseNumber(this.tableData.total_amount)
  : "您还没有传入getChineseNumber";
 }
 },

 methods: {

 test() {
  console.log("21111111111111");
  console.log("test");
 }
 }
};