Web端实现A3/A4纸张打印（Vue实战版）
Web打印A3/A4纸张的核心是通过 CSS @media print 控制打印样式（屏蔽无关元素、适配纸张尺寸），结合纸张物理尺寸与96DPI的像素换算，实现精准的打印布局。本文以Vue组件为例完成A4批量打印功能，并补充A3/A4尺寸换算规则，适配不同打印需求。
一、A4打印功能实现（Vue组件）
通过Vue组件实现「全部打印/指定页打印」，利用@media print屏蔽打印按钮等无关元素，适配A4纸张的物理尺寸（210×297mm）。
完整组件代码（print.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
| <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: 'PrintA4',
data() {
return {
total: 100, // 总打印条目数
pageSize: 15, // 每页显示条目数
pages: 0, // 总页数
lastPageSize: 0, // 最后一页条目数
currentPage: 0 // 当前选中页码（0表示全部）
};
},
mounted() {
// 计算总页数和最后一页条目数
this.lastPageSize = (this.total % this.pageSize) || this.pageSize;
this.pages = parseInt(this.total / this.pageSize) + (this.lastPageSize ? 1 : 0);
},
methods: {
// 打印全部页面
printAll() {
this.currentPage = 0; // 重置为显示全部
// 延迟执行，确保DOM渲染完成
setTimeout(() => window.print(), 201);
},
// 打印指定页面
print() {
window.print(); // 触发浏览器打印对话框
}
}
};
</script>
<style scoped lang="scss">
// 基础样式：适配A4纸张物理尺寸（210×297mm）
.print-box {
height: auto;
position: relative;
padding-top: 12px;
padding-bottom: 72px;
background: #000;
line-height: 0;
}
// 打印内容容器：严格匹配A4尺寸（mm单位，避免像素换算误差）
.print-bd {
box-sizing: border-box;
padding: 10mm 15mm 20mm 15mm; // 页边距（可根据需求调整）
width: 210mm; // A4宽度
height: 297mm; // A4高度
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; 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>
|
关键逻辑说明
- 分页计算：根据总条目数和每页条数，自动计算总页数和最后一页条目数，适配批量打印场景；
- 打印触发：调用浏览器原生
window.print()方法，通过setTimeout延迟执行，确保DOM渲染完成；
- 打印样式：
@media print 是核心——屏蔽打印按钮、重置容器样式，只保留核心打印内容；
- 尺寸单位：使用
mm（毫米）而非px（像素）定义纸张尺寸，避免不同设备DPI差异导致的布局偏差。
二、A3/A4纸张尺寸与像素换算（96DPI）
Web打印默认采用 96DPI（Dot Per Inch，每英寸像素数），需将纸张物理尺寸（mm）换算为像素（px），核心换算公式：
像素 = 英寸 × 96，其中 英寸 = 毫米 ÷ 25.41。
1. 基础物理尺寸
| 纸张类型 |
物理尺寸（mm） |
| A4 |
210 × 297 |
| A3 |
297 × 420 |
2. A4纸不同页边距的像素尺寸（96DPI）
打印机无法满幅打印，需根据页边距调整内容像素尺寸，以下为实测适配值：
| 打印页边距 |
内容最大像素尺寸（宽×高） |
适配代码示例 |
| 0mm |
794 × 1123 |
<div style="width:794px;height:1123px;"></div> |
| 5mm |
756 × 1086 |
<div style="width:756px;height:1086px;"></div> |
| 19.05mm |
649 × 978 |
<div style="width:649px;height:978px;"></div> |
提示：A3纸可参考相同逻辑换算（297×420mm → 96DPI下基础像素为 1169×1654），页边距需按比例扣除。
三、参考资料
- https://blog.csdn.net/xinyflove/article/details/72138291
- https://blog.csdn.net/qq_39691676/article/details/103974726
总结
- Web打印核心：通过
@media print控制打印样式，优先使用mm单位定义纸张尺寸，避免像素换算误差；
- 分页打印：通过Vue的
v-show控制单页/全部显示，结合window.print()触发打印；
- 尺寸适配：96DPI是Web打印的默认分辨率，A4基础像素为794×1123，需根据打印机页边距调整最终尺寸。