当前位置：首页 > VUE

vue实现表格导出功能

2026-02-25 06:58:23VUE

使用xlsx库实现表格导出

安装xlsx库

npm install xlsx

引入xlsx库

import XLSX from 'xlsx';

准备表格数据

const tableData = [
  { name: '张三', age: 25, gender: '男' },
  { name: '李四', age: 30, gender: '女' }
];

导出Excel文件

exportToExcel() {
  const ws = XLSX.utils.json_to_sheet(this.tableData);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
  XLSX.writeFile(wb, "export.xlsx");
}

使用vue-json-excel插件

安装插件

npm install vue-json-excel

全局注册组件

import JsonExcel from 'vue-json-excel';
Vue.component('downloadExcel', JsonExcel);

模板中使用

vue实现表格导出功能

<download-excel 
  :data="tableData"
  :fields="json_fields"
  name="导出数据.xls">
  <button>导出Excel</button>
</download-excel>

定义导出字段

json_fields: {
  '姓名': 'name',
  '年龄': 'age',
  '性别': 'gender'
}

使用html-to-xlsx方案

安装依赖

npm install html-to-xlsx

获取表格HTML

const table = document.getElementById('exportTable');

转换并导出

vue实现表格导出功能

const htmlToXlsx = require('html-to-xlsx');
htmlToXlsx(table, 'export.xlsx');

自定义CSV导出

实现CSV导出方法

exportToCSV() {
  const csvContent = "data:text/csv;charset=utf-8,";
  const headers = Object.keys(this.tableData[0]).join(",");
  const rows = this.tableData.map(item => 
    Object.values(item).join(",")
  ).join("\n");

  const encodedUri = encodeURI(csvContent + headers + "\n" + rows);
  const link = document.createElement("a");
  link.setAttribute("href", encodedUri);
  link.setAttribute("download", "export.csv");
  document.body.appendChild(link);
  link.click();
}

使用Element UI的表格导出

安装Element UI

npm install element-ui

引入组件

import { Table, TableColumn, Button } from 'element-ui';

表格结构

<el-table :data="tableData" ref="exportTable">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
<el-button @click="exportExcel">导出</el-button>

导出方法

exportExcel() {
  import('@/vendor/Export2Excel').then(excel => {
    const tHeader = ['姓名', '年龄'];
    const filterVal = ['name', 'age'];
    const data = this.formatJson(filterVal, this.tableData);
    excel.export_json_to_excel({
      header: tHeader,
      data,
      filename: '导出数据'
    });
  });
},
formatJson(filterVal, jsonData) {
  return jsonData.map(v => filterVal.map(j => v[j]));
}