vue实现a4打印模板
Vue 实现 A4 打印模板
页面布局与样式设置
设置 A4 纸张尺寸（210mm × 297mm）的打印样式，通过 CSS 确保打印内容适配纸张。在 Vue 组件的 <style> 标签中添加以下代码：
@media print {
@page {
size: A4;
margin: 0;
}
body {
width: 210mm;
height: 297mm;
margin: 0 auto;
}
}打印内容区域设计
在模板中定义打印区域，使用固定宽高避免内容溢出。示例代码：
<template>
<div class="print-container">
<!-- 打印内容 -->
<div v-for="item in items" :key="item.id" class="print-item">
{{ item.text }}
</div>
</div>
</template>
<style scoped>
.print-container {
width: 210mm;
min-height: 297mm;
padding: 15mm;
box-sizing: border-box;
}
.print-item {
margin-bottom: 10px;
}
</style>打印功能触发
通过 Vue 方法调用浏览器打印 API，使用 window.print() 实现打印。示例：
methods: {
handlePrint() {
window.print();
}
}分页控制
对于多页内容，使用 CSS 的 page-break 属性控制分页：
.page-break {
page-break-after: always;
}隐藏非打印元素
在打印时隐藏按钮、导航栏等非必要元素：
@media print {
.no-print {
display: none;
}
}动态数据绑定
结合 Vue 的数据绑定特性动态渲染打印内容：
data() {
return {
items: [
{ id: 1, text: '内容1' },
{ id: 2, text: '内容2' }
]
};
}打印预览优化
通过 @media print 调整字体、边距等细节，确保打印效果符合预期：
@media print {
body {
font-family: "SimSun", serif;
line-height: 1.5;
}
}注意事项
- 打印背景色需在浏览器设置中手动开启。
- 测试不同浏览器的打印兼容性，尤其是 Chrome 和 Firefox。
- 复杂表格或列表建议使用
page-break-inside: avoid避免内容跨页断裂。
通过以上步骤可实现 Vue 驱动的 A4 打印模板，兼顾动态数据与打印样式控制。
