vue实现打印功能
使用 vue-print-nb 插件实现打印
安装插件：
npm install vue-print-nb --save在 main.js 中引入：
import Print from 'vue-print-nb'
Vue.use(Print)模板中使用：
<button v-print="printObj">打印</button>
<div id="printContent">
<!-- 需要打印的内容 -->
</div>配置打印对象：
data() {
return {
printObj: {
id: 'printContent',
popTitle: '打印标题', // 打印窗口标题
extraCss: 'https://example.com/style.css', // 额外CSS
extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>' // 额外HEAD
}
}
}使用原生 window.print() 方法
创建打印方法：
methods: {
printPage() {
window.print()
}
}使用CSS控制打印样式：
@media print {
.no-print {
display: none;
}
@page {
size: A4;
margin: 0;
}
}打印特定区域内容
创建打印函数：
printSpecificArea() {
const printContent = document.getElementById('printArea').innerHTML
const originalContent = document.body.innerHTML
document.body.innerHTML = printContent
window.print()
document.body.innerHTML = originalContent
}使用 iframe 实现打印
创建打印方法：
printWithIframe() {
const content = document.getElementById('printArea').innerHTML
const iframe = document.createElement('iframe')
iframe.style.display = 'none'
document.body.appendChild(iframe)
const frameDoc = iframe.contentWindow || iframe.contentDocument
if (frameDoc.document) {
frameDoc = frameDoc.document
}
frameDoc.open()
frameDoc.write(`
<html>
<head>
<title>打印</title>
<style>
@page { size: auto; margin: 0mm; }
body { margin: 10mm; }
</style>
</head>
<body>${content}</body>
</html>
`)
frameDoc.close()
setTimeout(() => {
iframe.contentWindow.focus()
iframe.contentWindow.print()
document.body.removeChild(iframe)
}, 200)
}打印优化技巧
设置打印分页：
.page-break {
page-break-after: always;
}隐藏不需要打印的元素：
@media print {
.no-print {
display: none !important;
}
}打印背景颜色和图像：
@media print {
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
}
