vue实现导出表格
Vue 中实现表格导出的方法
使用 xlsx 库实现 Excel 导出
安装 xlsx 库：
npm install xlsx在 Vue 组件中引入并实现导出功能：
import XLSX from 'xlsx'
export default {
methods: {
exportToExcel() {
const table = document.getElementById('export-table')
const workbook = XLSX.utils.table_to_book(table)
XLSX.writeFile(workbook, 'exported_data.xlsx')
}
}
}HTML 部分：
<button @click="exportToExcel">导出Excel</button>
<table id="export-table">
<!-- 表格内容 -->
</table>使用 html2canvas 和 jsPDF 实现 PDF 导出
安装所需库：
npm install html2canvas jspdf实现代码：
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
export default {
methods: {
exportToPDF() {
const element = document.getElementById('export-table')
html2canvas(element).then(canvas => {
const imgData = canvas.toDataURL('image/png')
const pdf = new jsPDF()
pdf.addImage(imgData, 'PNG', 0, 0)
pdf.save('exported_data.pdf')
})
}
}
}使用 CSV 格式导出
简单实现 CSV 导出的方法：
export default {
methods: {
exportToCSV() {
const rows = [
['姓名', '年龄', '城市'],
['张三', '25', '北京'],
['李四', '30', '上海']
]
let csvContent = rows.map(e => e.join(',')).join('\n')
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = 'exported_data.csv'
link.click()
}
}
}注意事项
表格数据需要提前准备好，确保导出的内容完整准确
对于大数据量导出，建议分批次处理避免性能问题
导出的文件名可以根据需要动态设置，如加入时间戳：
const timestamp = new Date().toISOString().slice(0, 19).replace(/[-:]/g, '')
const filename = `data_export_${timestamp}.xlsx`样式处理需要注意，某些样式在导出时可能无法完全保留
浏览器兼容性问题需要考虑，特别是较旧版本的浏览器
