vue实现表格导出
Vue 表格导出实现方法
使用 xlsx 库导出 Excel
安装 xlsx 库：
npm install xlsx创建导出方法：
import * as XLSX from 'xlsx';
export function exportExcel(data, fileName = '导出数据') {
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, `${fileName}.xlsx`);
}在组件中使用：
import { exportExcel } from '@/utils/export';
methods: {
handleExport() {
const tableData = this.tableData; // 获取表格数据
exportExcel(tableData, '用户数据');
}
}使用 html-to-excel 库
安装 html-to-excel：
npm install vue-html-to-excel注册插件：
import Vue from 'vue';
import VueHtmlToExcel from 'vue-html-to-excel';
Vue.use(VueHtmlToExcel);模板中使用：
<template>
<button @click="exportToExcel">导出Excel</button>
</template>
<script>
export default {
data() {
return {
tableData: [...]
}
},
methods: {
exportToExcel() {
this.$htmlToExcel('导出数据', 'table-id');
}
}
}
</script>导出 CSV 格式
创建 CSV 导出方法：
export function exportCSV(data, fileName = '导出数据') {
const header = Object.keys(data[0]).join(',') + '\n';
const rows = data.map(item =>
Object.values(item).join(',')
).join('\n');
const csvContent = header + rows;
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
const link = document.createElement('a');
const url = URL.createObjectURL(blob);
link.href = url;
link.download = `${fileName}.csv`;
link.click();
URL.revokeObjectURL(url);
}使用 jsPDF 导出 PDF
安装 jsPDF 和 html2canvas：
npm install jspdf html2canvas创建 PDF 导出方法：
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
export 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');
const imgWidth = pdf.internal.pageSize.getWidth();
const imgHeight = canvas.height * imgWidth / canvas.width;
pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
pdf.save(`${fileName}.pdf`);
});
}注意事项
确保导出的数据已经处理完毕，避免导出过程中数据发生变化
对于大数据量导出，建议添加加载提示，避免用户误操作
导出的文件名应该具有描述性，方便用户识别
浏览器可能会阻止弹出窗口，需要确保导出操作是由用户直接触发的
不同浏览器对 Blob 对象的支持可能有所不同，需要进行兼容性测试
