vue表格实现导出
Vue 表格导出实现方法
使用 xlsx 库
安装 xlsx 库：
npm install xlsx创建导出方法：
import * as XLSX from 'xlsx';
exportToExcel() {
const table = document.getElementById('tableId');
const workbook = XLSX.utils.table_to_book(table);
XLSX.writeFile(workbook, 'export.xlsx');
}使用 vue-json-excel 插件
安装插件：
npm install vue-json-excel注册组件：
import JsonExcel from 'vue-json-excel';
Vue.component('downloadExcel', JsonExcel);模板中使用：
<download-excel
:data="tableData"
:fields="columns"
name="export.xls">
<button>导出Excel</button>
</download-excel>使用 html2canvas 和 jsPDF 导出 PDF
安装依赖：
npm install html2canvas jspdf实现方法：
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
exportToPDF() {
const table = document.getElementById('tableId');
html2canvas(table).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF('p', 'mm', 'a4');
pdf.addImage(imgData, 'PNG', 0, 0);
pdf.save('export.pdf');
});
}使用 CSV 格式导出
实现方法：
exportToCSV() {
const headers = Object.keys(this.tableData[0]).join(',');
const rows = this.tableData.map(item =>
Object.values(item).join(',')
).join('\n');
const csvContent = `${headers}\n${rows}`;
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'export.csv';
link.click();
}注意事项
确保表格数据已正确加载后再执行导出操作 处理导出时的中文乱码问题，可设置字符编码 对于大数据量导出，考虑分页或分批处理 不同浏览器对导出功能的支持可能有所差异
