vue实现表格打印
Vue 实现表格打印的方法
使用 window.print() 方法
在 Vue 中可以通过调用浏览器的 window.print() 方法实现打印功能。创建一个打印按钮，点击时触发打印事件。
<template>
<div>
<button @click="printTable">打印表格</button>
<table ref="printTableRef">
<!-- 表格内容 -->
</table>
</div>
</template>
<script>
export default {
methods: {
printTable() {
window.print();
}
}
};
</script>
<style>
@media print {
body * {
visibility: hidden;
}
table, table * {
visibility: visible;
}
table {
position: absolute;
left: 0;
top: 0;
}
}
</style>使用第三方库 vue-print-nb
vue-print-nb 是一个专门为 Vue 设计的打印插件，使用起来更加方便。
安装插件：
npm install vue-print-nb --save在 Vue 项目中使用：
import Print from 'vue-print-nb'
Vue.use(Print);模板中使用：
<template>
<div>
<button v-print="printObj">打印表格</button>
<table id="printTable">
<!-- 表格内容 -->
</table>
</div>
</template>
<script>
export default {
data() {
return {
printObj: {
id: 'printTable',
popTitle: '表格打印'
}
}
}
};
</script>自定义打印样式
通过 CSS 的 @media print 可以自定义打印时的样式，隐藏不需要打印的元素。
@media print {
.no-print {
display: none;
}
.print-table {
width: 100%;
border-collapse: collapse;
}
.print-table th, .print-table td {
border: 1px solid #000;
padding: 8px;
}
}使用 iframe 打印
创建一个隐藏的 iframe，将表格内容复制到 iframe 中，然后打印 iframe 的内容。
methods: {
printUsingIframe() {
const content = this.$refs.printTable.innerHTML;
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
const frameDoc = iframe.contentDocument || iframe.contentWindow.document;
frameDoc.open();
frameDoc.write(`
<!DOCTYPE html>
<html>
<head>
<title>打印表格</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #000;
padding: 8px;
}
</style>
</head>
<body>
${content}
</body>
</html>
`);
frameDoc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
document.body.removeChild(iframe);
}
}打印特定区域
通过 CSS 控制只打印特定的区域，隐藏其他内容。
@media print {
body * {
visibility: hidden;
}
.print-area, .print-area * {
visibility: visible;
}
.print-area {
position: absolute;
left: 0;
top: 0;
}
}<div class="print-area">
<!-- 需要打印的表格内容 -->
</div>
