vue 打印功能实现
Vue 打印功能实现方法
使用 window.print() 方法
在 Vue 中调用原生 JavaScript 的 window.print() 方法是最简单的打印方式。创建一个打印按钮，点击时触发打印当前页面。
<template>
<button @click="printPage">打印当前页</button>
</template>
<script>
export default {
methods: {
printPage() {
window.print();
}
}
}
</script>打印指定区域内容
通过 CSS 控制只打印页面的特定区域，隐藏不需要打印的部分。
<template>
<div>
<div class="no-print">不打印的内容</div>
<div id="printArea">需要打印的内容</div>
<button @click="printSpecificArea">打印指定区域</button>
</div>
</template>
<script>
export default {
methods: {
printSpecificArea() {
const printContents = document.getElementById('printArea').innerHTML;
const originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
}
}
</script>
<style>
@media print {
.no-print {
display: none;
}
}
</style>使用 vue-print-nb 插件
安装 vue-print-nb 插件可以更方便地实现打印功能。
npm install vue-print-nb --save在 Vue 项目中注册插件并使用：
import Print from 'vue-print-nb'
Vue.use(Print);<template>
<div id="printMe">
需要打印的内容
</div>
<button v-print="'#printMe'">打印</button>
</template>打印 PDF 文件
如果需要打印 PDF 文件，可以使用浏览器内置的 PDF 查看器打印功能。
<template>
<button @click="printPDF">打印PDF</button>
</template>
<script>
export default {
methods: {
printPDF() {
window.open('/path/to/file.pdf', '_blank').print();
}
}
}
</script>打印样式优化
通过 CSS 的 @media print 规则优化打印输出的样式。
@media print {
body {
margin: 0;
padding: 0;
background: white;
color: black;
}
a {
text-decoration: none;
color: black;
}
}注意事项
- 打印前确保内容已完全加载，避免打印不完整。
- 测试不同浏览器的打印效果，确保兼容性。
- 考虑打印页面的页眉页脚设置，可通过浏览器打印设置调整。
