vue实现导出表格
Vue 实现导出表格的方法
使用 xlsx 库导出 Excel
安装 xlsx 库
npm install xlsx --save在组件中引入并使用
import XLSX from 'xlsx';
methods: {
exportToExcel() {
const table = document.getElementById('exportTable');
const workbook = XLSX.utils.table_to_book(table);
XLSX.writeFile(workbook, '表格数据.xlsx');
}
}模板中添加表格和导出按钮
<button @click="exportToExcel">导出Excel</button>
<table id="exportTable">
<!-- 表格内容 -->
</table>使用 html2canvas 和 jsPDF 导出 PDF
安装依赖
npm install html2canvas jspdf --save实现导出功能
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
methods: {
exportToPDF() {
const table = document.getElementById('exportTable');
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('表格数据.pdf');
});
}
}使用 CSV 格式导出
实现 CSV 导出方法
methods: {
exportToCSV() {
const csvContent = "data:text/csv;charset=utf-8,"
+ this.tableData.map(row => Object.values(row).join(",")).join("\n");
const encodedUri = encodeURI(csvContent);
const link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "表格数据.csv");
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}使用第三方组件库
Element UI 表格导出
import { export_json_to_excel } from '@/vendor/Export2Excel';
methods: {
exportExcel() {
const tHeader = ['列名1', '列名2'];
const filterVal = ['key1', 'key2'];
const data = this.tableData.map(v => filterVal.map(k => v[k]));
export_json_to_excel(tHeader, data, '表格数据');
}
}注意事项
- 确保导出的数据已经加载完成
- 大数据量导出时考虑分页或分批处理
- 导出的文件名应避免特殊字符
- 跨浏览器兼容性测试
- 移动端导出功能可能需要特殊处理
以上方法可以根据实际需求选择使用，xlsx 库功能最全面，CSV 方式最简单，PDF 适合需要保持格式的场景。
