当前位置：首页 > VUE

vue 实现excel效果

2026-02-20 11:31:32VUE

Vue 实现 Excel 效果的方法

使用第三方库 x-spreadsheet

x-spreadsheet 是一个轻量级的 JavaScript 表格库，支持类似 Excel 的编辑功能。在 Vue 项目中可以通过以下方式集成：

安装依赖：

npm install x-data-spreadsheet

组件中使用：

<template>
  <div id="x-spreadsheet-demo"></div>
</template>

<script>
import Spreadsheet from "x-data-spreadsheet";

export default {
  mounted() {
    new Spreadsheet("#x-spreadsheet-demo")
      .loadData({}) // 初始化空表格
      .change(data => {
        console.log("数据变更:", data);
      });
  }
};
</script>

支持功能：

单元格编辑
公式计算
合并单元格
样式调整

使用 Handsontable

Handsontable 是功能更强大的商业表格库，提供专业版和免费版：

安装：

vue 实现excel效果

npm install handsontable @handsontable/vue

基本实现：

<template>
  <HotTable :data="data" :colHeaders="true" :rowHeaders="true"/>
</template>

<script>
import { HotTable } from '@handsontable/vue';
import 'handsontable/dist/handsontable.full.css';

export default {
  components: { HotTable },
  data() {
    return {
      data: [
        ['A1', 'B1', 'C1'],
        ['A2', 'B2', 'C2']
      ]
    };
  }
};
</script>

高级功能：

数据验证
条件格式
冻结行列
导出Excel

自定义实现基础功能

如需轻量级自定义方案，可结合 HTML table 和 contenteditable：

<template>
  <table class="excel-table">
    <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
      <td 
        v-for="(cell, colIndex) in row" 
        :key="colIndex"
        contenteditable 
        @blur="updateCell(rowIndex, colIndex, $event)"
      >{{ cell }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: Array(10).fill().map(() => Array(5).fill(''))
    };
  },
  methods: {
    updateCell(row, col, event) {
      this.$set(this.tableData[row], col, event.target.textContent);
    }
  }
};
</script>

<style>
.excel-table {
  border-collapse: collapse;
}
.excel-table td {
  border: 1px solid #ddd;
  padding: 8px;
  min-width: 100px;
}
</style>

实现导入导出功能

使用 sheetjs 库实现 Excel 文件处理：

vue 实现excel效果

安装：

npm install xlsx

组件实现：

methods: {
  importExcel(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]];
      this.tableData = XLSX.utils.sheet_to_json(firstSheet, { header: 1 });
    };
    reader.readAsArrayBuffer(file);
  },

  exportExcel() {
    const worksheet = XLSX.utils.aoa_to_sheet(this.tableData);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
    XLSX.writeFile(workbook, "export.xlsx");
  }
}