vue实现表格导出
Vue 实现表格导出方法
使用 xlsx 库导出 Excel
安装 xlsx 库：
npm install xlsx在 Vue 组件中使用：
import XLSX from 'xlsx'
methods: {
exportToExcel() {
const table = document.getElementById('export-table')
const workbook = XLSX.utils.table_to_book(table)
XLSX.writeFile(workbook, 'table.xlsx')
}
}HTML 表格需要设置 id：
<table id="export-table">
<!-- 表格内容 -->
</table>
<button @click="exportToExcel">导出Excel</button>使用 FileSaver 导出 CSV
安装 file-saver：
npm install file-saver实现方法：
import { saveAs } from 'file-saver'
methods: {
exportToCSV() {
const csv = this.generateCSV()
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
saveAs(blob, 'data.csv')
},
generateCSV() {
let csv = 'Name,Age,Email\n'
this.tableData.forEach(row => {
csv += `${row.name},${row.age},${row.email}\n`
})
return csv
}
}使用 html2canvas 和 jsPDF 导出 PDF
安装依赖：
npm install html2canvas jspdf实现方法：
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
methods: {
exportToPDF() {
const element = document.getElementById('export-table')
html2canvas(element).then(canvas => {
const imgData = canvas.toDataURL('image/png')
const pdf = new jsPDF('p', 'mm', 'a4')
pdf.addImage(imgData, 'PNG', 0, 0)
pdf.save('table.pdf')
})
}
}使用第三方组件库
Element UI 表格导出：
import { export_json_to_excel } from '@/vendor/Export2Excel'
methods: {
exportExcel() {
const tHeader = ['姓名', '年龄']
const data = this.tableData.map(item => [item.name, item.age])
export_json_to_excel({
header: tHeader,
data,
filename: '表格数据'
})
}
}注意事项
- 大数据量导出时考虑分页或流式处理
- 导出的数据需要提前处理好格式
- 中文字符需要特别注意编码问题
- 浏览器兼容性问题需要测试
以上方法可以根据实际需求选择使用，xlsx 库适合复杂 Excel 导出，CSV 适合简单数据，PDF 适合需要保持格式的场景。
