当前位置：首页 > VUE

vue.js 实现excel

2026-02-22 03:41:55VUE

Vue.js 实现 Excel 功能

在 Vue.js 中实现 Excel 相关的功能（如导入、导出、编辑等）可以通过多种方式完成，通常需要借助第三方库。以下是几种常见的实现方法：

导出 Excel 文件

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

npm install xlsx

示例代码：

import * as XLSX from 'xlsx';

export default {
  methods: {
    exportToExcel() {
      const data = [
        ['Name', 'Age', 'Country'],
        ['John', 25, 'USA'],
        ['Jane', 30, 'Canada']
      ];

      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, 'exported_data.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);
    }
  }
}

表格编辑与 Excel 风格

使用 vue-excel-editor 或 handsontable 可以实现类似 Excel 的表格编辑功能。

安装 handsontable：

npm install handsontable @handsontable/vue

示例代码：

import { HotTable } from '@handsontable/vue';
import Handsontable from 'handsontable';

export default {
  components: { HotTable },
  data() {
    return {
      hotSettings: {
        data: [
          ['Name', 'Age', 'Country'],
          ['John', 25, 'USA'],
          ['Jane', 30, 'Canada']
        ],
        colHeaders: true,
        rowHeaders: true,
        licenseKey: 'non-commercial-and-evaluation'
      }
    };
  }
}

模板部分：

<hot-table :settings="hotSettings"></hot-table>

使用纯前端库实现复杂功能

对于更复杂的需求（如公式计算、样式设置等），可以结合 xlsx 和 handsontable 实现完整的 Excel 功能。

vue.js 实现excel

import { HotTable } from '@handsontable/vue';
import XLSX from 'xlsx';

export default {
  components: { HotTable },
  data() {
    return {
      hotSettings: {
        data: [],
        colHeaders: true,
        formulas: true,
        licenseKey: 'non-commercial-and-evaluation'
      }
    };
  },
  methods: {
    loadExcel(file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });
        const sheetName = workbook.SheetNames[0];
        const sheet = workbook.Sheets[sheetName];
        this.hotSettings.data = XLSX.utils.sheet_to_json(sheet, { header: 1 });
      };
      reader.readAsArrayBuffer(file);
    }
  }
}