Vue实现导出excel表格功能

下面是Vue实现导出Excel表格的完整攻略：

准备工作

1. 引入xlsx库，可以通过以下命令安装 npm install xlsx --save。
2. 在Vue项目中新建一个组件用来放置导出Excel的按钮。

示例代码

<template>
  <div>
    <button @click="generateExcel()">导出Excel</button>
  </div>
</template>

Excel数据处理

在生成Excel之前，我们需要对数据进行预处理和格式化，以便于在Excel表格中展现更美观。

1. 安装file-saver库（可选）

使用file-saver库可以在浏览器端直接将数据保存为本地文件，方便用户导出并查看。

npm install file-saver --save

2. 数据格式化

我们需要把要导出的数据按照表格的格式处理成一个js数组对象，例如：

[
  { name: '张三', age: 18, sex: '男' },
  { name: '李四', age: 20, sex: '女' },
  { name: '王五', age: 22, sex: '男' }
]

3. 生成Excel

最后，我们需要使用SheetJS库将处理后的数据生成Excel文件。

import XLSX from 'xlsx';
import FileSaver from 'file-saver';

methods: {
  generateExcel() {
    /* 处理数据 */
    let data = [
      { name: '张三', age: 18, sex: '男' },
      { name: '李四', age: 20, sex: '女' },
      { name: '王五', age: 22, sex: '男' }
    ];
    let ws_name = 'Sheet1';
    let ws_data = [
      ['姓名', '年龄', '性别'],
      ...data.map(item => [item.name, item.age, item.sex])
    ];
    let wb = XLSX.utils.book_new();
    let ws = XLSX.utils.aoa_to_sheet(ws_data);
    XLSX.utils.book_append_sheet(wb, ws, ws_name);
    let wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
    let filename = 'example.xlsx';
    FileSaver.saveAs(new Blob([this.s2ab(wbout)], { type: 'application/octet-stream' }), filename);
  },
  s2ab(s) {
    let buf = new ArrayBuffer(s.length);
    let view = new Uint8Array(buf);
    for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
    return buf;
  }
}

示例代码

<template>
  <div>
    <button @click="generateExcel()">导出Excel</button>
  </div>
</template>

<script>
import XLSX from 'xlsx';
import FileSaver from 'file-saver';

export default {
  methods: {
    generateExcel() {
      /* 处理数据 */
      let data = [
        { name: '张三', age: 18, sex: '男' },
        { name: '李四', age: 20, sex: '女' },
        { name: '王五', age: 22, sex: '男' }
      ];
      let ws_name = 'Sheet1';
      let ws_data = [
        ['姓名', '年龄', '性别'],
        ...data.map(item => [item.name, item.age, item.sex])
      ];
      let wb = XLSX.utils.book_new();
      let ws = XLSX.utils.aoa_to_sheet(ws_data);
      XLSX.utils.book_append_sheet(wb, ws, ws_name);
      let wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
      let filename = 'example.xlsx';
      FileSaver.saveAs(new Blob([this.s2ab(wbout)], { type: 'application/octet-stream' }), filename);
    },
    s2ab(s) {
      let buf = new ArrayBuffer(s.length);
      let view = new Uint8Array(buf);
      for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
      return buf;
    }
  }
}
</script>