vue实现导出excel表格

Vue 实现导出 Excel 表格的方法

使用 xlsx 库

安装 xlsx 库：

npm install xlsx

在 Vue 组件中引入并使用：

import * as XLSX from 'xlsx';

export default {
  methods: {
    exportToExcel() {
      const data = [
        ['Name', 'Age', 'Email'],
        ['Alice', 25, 'alice@example.com'],
        ['Bob', 30, 'bob@example.com']
      ];
      const ws = XLSX.utils.aoa_to_sheet(data);
      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

在 Vue 中注册并使用：

import JsonExcel from 'vue-json-excel';

export default {
  components: {
    JsonExcel
  },
  data() {
    return {
      json_data: [
        { name: 'Alice', age: 25, email: 'alice@example.com' },
        { name: 'Bob', age: 30, email: 'bob@example.com' }
      ],
      fields: {
        'Name': 'name',
        'Age': 'age',
        'Email': 'email'
      }
    }
  }
}

模板中使用：

<download-excel
  :data="json_data"
  :fields="fields"
  name="export.xlsx">
  Download Excel
</download-excel>

使用 FileSaver 和 xlsx

结合 FileSaver 实现下载：

npm install file-saver xlsx

实现代码：

import { saveAs } from 'file-saver';
import * as XLSX from 'xlsx';

export default {
  methods: {
    exportExcel() {
      const data = [
        { name: 'Alice', age: 25, email: 'alice@example.com' },
        { name: 'Bob', age: 30, email: 'bob@example.com' }
      ];
      const worksheet = XLSX.utils.json_to_sheet(data);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
      const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
      const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      saveAs(blob, 'export.xlsx');
    }
  }
}

后端生成 Excel 前端下载

如果数据量较大，建议后端生成 Excel 文件，前端通过接口下载：

export default {
  methods: {
    downloadExcel() {
      window.location.href = '/api/export-excel';
    }
  }
}

后端示例（Node.js Express）：

const express = require('express');
const XLSX = require('xlsx');
const app = express();

app.get('/api/export-excel', (req, res) => {
  const data = [
    ['Name', 'Age', 'Email'],
    ['Alice', 25, 'alice@example.com'],
    ['Bob', 30, 'bob@example.com']
  ];
  const ws = XLSX.utils.aoa_to_sheet(data);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
  const buf = XLSX.write(wb, { type: 'buffer', bookType: 'xlsx' });
  res.setHeader('Content-Disposition', 'attachment; filename=export.xlsx');
  res.type('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
  res.send(buf);
});

样式定制

如需添加样式，可以使用 xlsx-style 库：

npm install xlsx-style

示例代码：

import * as XLSX from 'xlsx-style';

export default {
  methods: {
    exportStyledExcel() {
      const ws = {
        '!ref': 'A1:C3',
        A1: { t: 's', v: 'Name', s: { font: { bold: true } } },
        B1: { t: 's', v: 'Age', s: { font: { bold: true } } },
        C1: { t: 's', v: 'Email', s: { font: { bold: true } } },
        A2: { t: 's', v: 'Alice' },
        B2: { t: 'n', v: 25 },
        C2: { t: 's', v: 'alice@example.com' }
      };
      const wb = { SheetNames: ['Sheet1'], Sheets: { Sheet1: ws } };
      const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
      const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      saveAs(blob, 'styled-export.xlsx');
    }
  }
}

大数据量分片处理

对于大数据量导出，建议分片处理：

export default {
  methods: {
    async exportLargeData() {
      const chunkSize = 10000;
      let offset = 0;
      const allData = [];

      while (true) {
        const chunk = await this.fetchData(offset, chunkSize);
        if (chunk.length === 0) break;
        allData.push(...chunk);
        offset += chunkSize;
      }

      const ws = XLSX.utils.json_to_sheet(allData);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
      XLSX.writeFile(wb, 'large-export.xlsx');
    },

    fetchData(offset, limit) {
      // 实现数据获取逻辑
    }
  }
}

以上方法覆盖了 Vue 中实现 Excel 导出的常见场景，从简单表格到大数据量处理，以及样式定制等需求。根据实际项目需求选择合适的方法即可。