当前位置：首页 > VUE

vue实现excel

2026-03-27 14:46:46VUE

Vue 实现 Excel 功能

在 Vue 项目中实现 Excel 功能通常涉及导出数据为 Excel 文件或导入 Excel 文件解析数据。以下是两种常见场景的实现方法。

导出数据为 Excel

使用 xlsx 库可以轻松将数据导出为 Excel 文件。安装 xlsx：

npm install xlsx

在 Vue 组件中实现导出功能：

import * as XLSX from 'xlsx';

export default {
  methods: {
    exportToExcel() {
      const data = [
        ['Name', 'Age', 'Country'],
        ['Alice', 25, 'USA'],
        ['Bob', 30, 'UK']
      ];
      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');
    }
  }
}

导入 Excel 文件解析数据

使用 xlsx 解析上传的 Excel 文件：

import * as XLSX from 'xlsx';

export default {
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });
        const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
        const jsonData = XLSX.utils.sheet_to_json(firstSheet);
        console.log(jsonData);
      };
      reader.readAsArrayBuffer(file);
    }
  }
}

使用第三方组件

vue-json-excel 是一个专门为 Vue 设计的 Excel 导出组件。安装：

npm install vue-json-excel

在组件中使用：

import JsonExcel from 'vue-json-excel';

export default {
  components: {
    JsonExcel
  },
  data() {
    return {
      jsonData: [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 }
      ],
      fields: {
        'Name': 'name',
        'Age': 'age'
      }
    };
  }
}

模板部分：

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

服务器端导出

对于大量数据，可以在后端生成 Excel 文件并通过 API 返回。前端使用 axios 下载：

vue实现excel

axios({
  url: '/api/export',
  method: 'GET',
  responseType: 'blob'
}).then(response => {
  const url = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'export.xlsx');
  document.body.appendChild(link);
  link.click();
});

以上方法涵盖了 Vue 中实现 Excel 功能的主要场景，可以根据需求选择适合的方案。