vue3 使用print.js打印el-table全部数据

vue3 使用print.js打印el-table全部数据

安装

npm install print-js

html

<el-dialog v-model="dialogVisible" title="用户列表"><el-table :data="allTableData" ref="tableRef"><el-table-column prop="name" label="姓名" /><el-table-column prop="age" label="年龄" /><el-table-column prop="city" label="城市" /></el-table><template #footer><el-button @click="printAllRows">打印所有行</el-button></template>
</el-dialog>

script

import print from 'print-js'// 完整的表格数据
const allTableData = ref([{ name: '张三', age: 25, city: '北京' },{ name: '李四', age: 30, city: '上海' },{ name: '王五', age: 28, city: '广州' },{ name: '赵六', age: 32, city: '深圳' },
])// 打印所有行
const printAllRows = () => {print({printable: allTableData.value, // 打印全部数据properties: [{ field: 'name', displayName: '姓名' },{ field: 'age', displayName: '年龄' },{ field: 'city', displayName: '城市' }],type: 'json',header: '<h3 style="text-align: center;">用户信息表（全部数据）</h3>',style: `table { width: 100%; border-collapse: collapse; }th, td { text-align: center; padding: 8px; border: 1px solid #ddd; }th { background-color: #f5f5f5; }`,// 可选：添加页脚bottom: '<p style="text-align: center; font-size: 12px;">打印时间：' + new Date().toLocaleString() + '</p>'})
}