elementui export
导出功能实现方法
Element UI 提供了多种导出数据的方法,可以通过表格组件或第三方库实现。
表格导出 Excel
使用 el-table 配合 xlsx 库实现 Excel 导出功能。安装依赖:
npm install xlsx file-saver
示例代码:
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'
function exportExcel() {
const table = document.querySelector('.el-table')
const wb = XLSX.utils.table_to_book(table)
const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'data.xlsx')
}
自定义数据导出 对于非表格数据或需要定制格式的导出:
function exportCustomData(data) {
const ws = XLSX.utils.json_to_sheet(data)
const wb = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
XLSX.writeFile(wb, 'custom_data.xlsx')
}
PDF 导出方案
使用 jspdf 和 html2canvas 实现 PDF 导出:
npm install jspdf html2canvas
实现代码:
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
function exportPDF(elementId, filename) {
const element = document.getElementById(elementId)
html2canvas(element).then(canvas => {
const imgData = canvas.toDataURL('image/png')
const pdf = new jsPDF('p', 'mm', 'a4')
pdf.addImage(imgData, 'PNG', 0, 0, 210, 297)
pdf.save(filename || 'document.pdf')
})
}
注意事项
确保导出的数据已经过处理,避免包含敏感信息。对于大量数据建议分页或分批导出。导出的文件名应该具有明确含义,包含日期或版本信息更佳。
浏览器兼容性方面,现代浏览器都能良好支持这些导出方案。在移动端使用时需要测试功能是否正常。







