web打印A3、A4
A4代码实现
print.vue，@media print 中加入样式，以屏蔽打印不相关的内容。
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
| <template>
<div class="print-box">
<div class="print-bd" v-for="x in pages" :key="x" v-show="currentPage ? (currentPage == x) : true">
<div v-for="y in x < pages ? pageSize : lastPageSize" :key="y">
<img src="//image.yitong.com/www/g/app-download/qrcode.jpg" />
<div>张某 {{(x-1)*15+y}}</div>
</div>
</div>
<div class="print-btn">
<div>
<div class="btn" @click="printAll">全部打印</div>
<div class="print-page">
打印第<input type="number" maxlength="1000" minlength="1" v-model="currentPage" />页 <div class="btn" @click="print">打印</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'print',
data() {
return {
total: 100,
pageSize: 15,
pages: 0,
lastPageSize: 0,
currentPage: 0
};
},
created() {
},
mounted () {
console.log($http)
this.lastPageSize = (this.total % this.pageSize) || this.pageSize
this.pages = parseInt(this.total / this.pageSize) + (this.lastPageSize ? 1 : 0)
},
methods: {
printAll() {
this.currentPage = 0
setTimeout(() => {
window.print()
}, 201)
},
print() {
window.print()
},
prev() {
},
next() {
}
}
};
</script>
<style scoped lang="scss">
.print-box {
height: auto;
position: relative;
padding-top: 12px;
padding-bottom: 72px;
background: #000;
line-height: 0;
}
.print-bd {
box-sizing: border-box;
padding: 10mm 15mm 20mm 15mm;
width: 210mm;
height: 297mm;
background-color: #fff;
margin: 0 auto;
> div {
width: 60mm;
text-align: center;
line-height: 1;
display: block;
float: left;
> img {
width: 80%;
}
> div {
line-height: 1;
font-size: 14px;
color: #666;
margin: 1mm 0 4mm;
}
}
}
.print-btn {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #f8f8f8;
> div {
height: 100%;
width: 210mm;
margin: 0 auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.print-page {
display: flex;
flex-direction: row;
align-items: center;
}
.btn {
cursor: pointer;
line-height: 1;
margin: 10px 5px;
border: 1px solid #ccc;
padding: 4px 8px;
transition: all .5s;
&:hover {
border-color: #c4261d;
color: #fff;
background-color: #c4261d;
}
}
}
@media print {
.print-btn {
display: none;
}
.print-box {
padding: 0;
}
}
</style>
|
A3、A4尺寸
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| 最近开发项目时遇到了网页打印的问题，这是问题之二，打印宽度设置
在公制长度单位与屏幕分辨率进行换算时，必须用到一个DPI(Dot Per Inch)指标。
经过我仔细的测试，发现了网页打印中，默认采用的是96dpi，并非传闻的72dpi
A4纸张的尺寸是210×297mm，按1英寸=25.41mm换算，即8.264×11.688英寸
所以，A4纸96dpi下的分辨率是794×1123，这就是我们在制作网页的时候需要的象素。
但是打印机是无法满幅打印的，总要有页边距，所以我们在制作网页的时候必须减去页边距。
以下是我测试的各种页边距下，A4纸对应的象素尺寸：
打印页边距设定为 0mm 时，网页内最大元素的分辨率：794×1123
<div style="width:794px;height:1123px;border:1px solid #000000;"> </div>
打印页边距设定为 5mm 时，网页内最大元素的分辨率：756×1086
<div style="width:756px;height:1086px;border:1px solid #000000;"> </div>
打印页边距设定为 19.05mm 时，网页内最大元素的分辨率：649×978
<div style="width:649px;height:978px;border:1px solid #000000;"> </div>
附：
A4纸的尺寸：210×297mm
A3纸的尺寸：297×420mm
|
参考资料
https://blog.csdn.net/xinyflove/article/details/72138291
https://blog.csdn.net/qq_39691676/article/details/103974726