vue实现table打印功能
Vue 实现表格打印功能
方法一：使用浏览器原生打印 API
在 Vue 组件中创建一个打印方法，利用 window.print() 触发浏览器打印对话框。确保表格样式适配打印布局。
<template>
<div>
<button @click="printTable">打印表格</button>
<div id="printArea">
<table>
<!-- 表格内容 -->
</table>
</div>
</div>
</template>
<script>
export default {
methods: {
printTable() {
const printContent = document.getElementById('printArea').innerHTML;
const originalContent = document.body.innerHTML;
document.body.innerHTML = printContent;
window.print();
document.body.innerHTML = originalContent;
}
}
};
</script>
<style>
@media print {
body * {
visibility: hidden;
}
#printArea, #printArea * {
visibility: visible;
}
#printArea {
position: absolute;
left: 0;
top: 0;
}
}
</style>方法二：使用第三方库 vue-print-nb
安装 vue-print-nb 插件，通过指令方式实现打印功能。
npm install vue-print-nb --save在 Vue 项目中注册插件并使用：
import Print from 'vue-print-nb'
Vue.use(Print);模板中使用 v-print 指令：
<template>
<div>
<button v-print="printObj">打印表格</button>
<div id="printContent">
<table>
<!-- 表格内容 -->
</table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
printObj: {
id: 'printContent',
popTitle: '表格打印',
extraCss: 'https://example.com/print.css'
}
}
}
}
</script>方法三：专用打印样式表
为打印场景单独设计 CSS 样式，隐藏非必要元素，优化打印布局。
/* 打印样式 */
@media print {
.no-print {
display: none;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #000;
padding: 8px;
}
thead {
display: table-header-group;
}
}方法四：PDF 生成后打印
使用 jsPDF 和 html2canvas 库将表格转为 PDF 后打印。
npm install jspdf html2canvas实现代码：
import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'
export default {
methods: {
async printPDF() {
const element = document.getElementById('printArea')
const canvas = await html2canvas(element)
const imgData = canvas.toDataURL('image/png')
const pdf = new jsPDF('p', 'mm', 'a4')
const imgWidth = 210
const imgHeight = canvas.height * imgWidth / canvas.width
pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight)
pdf.autoPrint()
window.open(pdf.output('bloburl'))
}
}
}注意事项
- 打印前检查页面边距设置，避免内容被裁剪
- 表格宽度建议使用固定单位（如px或mm）而非百分比
- 复杂表格考虑分页处理，避免跨页断行
- 彩色背景在黑白打印时可能显示异常，建议添加打印专用样式
- 测试不同浏览器的打印预览效果，确保兼容性
