vue实现局部打印
实现局部打印的基本思路
在Vue中实现局部打印通常需要借助CSS和JavaScript的打印功能。核心思路是将需要打印的内容单独提取，隐藏非打印部分，并通过浏览器的打印API触发打印操作。
使用CSS控制打印内容
通过@media print媒体查询可以控制打印时的样式。隐藏不需要打印的元素，仅显示目标区域：
@media print {
body * {
visibility: hidden;
}
.print-area, .print-area * {
visibility: visible;
}
.print-area {
position: absolute;
left: 0;
top: 0;
}
}创建打印组件
封装一个可复用的打印组件，通过插槽接收需要打印的内容：
<template>
<div>
<div class="print-area" ref="printContent">
<slot></slot>
</div>
<button @click="handlePrint">打印</button>
</div>
</template>
<script>
export default {
methods: {
handlePrint() {
window.print();
}
}
}
</script>使用iframe实现更复杂的打印
对于需要完全隔离打印样式的场景，可以使用iframe：
printWithIframe() {
const content = this.$refs.printContent.innerHTML;
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
const doc = iframe.contentWindow.document;
doc.open();
doc.write(`
<!DOCTYPE html>
<html>
<head>
<title>打印</title>
<style>
/* 自定义打印样式 */
</style>
</head>
<body>${content}</body>
</html>
`);
doc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
document.body.removeChild(iframe);
}使用第三方库
可以考虑使用专门的打印库如vue-print-nb：
import Vue from 'vue'
import Print from 'vue-print-nb'
Vue.use(Print);
// 在模板中使用
<button v-print="'#print-area'">打印</button>
<div id="print-area">
<!-- 打印内容 -->
</div>注意事项
打印样式可能需要单独调整，特别是边距和分页控制。可以在打印样式中添加：
@page {
size: auto;
margin: 0mm;
}
@media print {
.no-print {
display: none !important;
}
}对于复杂表格或布局，可能需要添加分页控制：
.page-break {
page-break-after: always;
}
