前端实现xlsx文件的读取并网页编辑，结合exceljs和x-data-spreadsheet，参考

1. 安装依赖

确保你已经安装了 x-data-spreadsheet 和 exceljs，以及中文语言包：

npm install x-data-spreadsheet exceljs

或者

yarn add x-data-spreadsheet exceljs

2. 导入和配置 `x-data-spreadsheet`

在你的 Vue 组件中，正确导入 x-data-spreadsheet 和中文语言包，并设置语言为中文（简体）。

<template>
  <div>
    <input type="file" @change="onFileChange" accept=".xlsx, .xls"/>
    <div ref="spreadsheet" style="height: 600px;"></div>
    <button @click="saveFile">下载修改后的文件</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import Spreadsheet from 'x-data-spreadsheet';
import 'x-data-spreadsheet/dist/xspreadsheet.css';
import * as ExcelJS from 'exceljs';
import zhCN from 'x-data-spreadsheet/dist/locale/zh-cn'; // 导入中文语言包

export default {
  setup() {
    const spreadsheet = ref(null);

    onMounted(() => {
      // 设置语言为中文（简体）
      Spreadsheet.locale('zh-cn', zhCN);

      // 初始化 x-data-spreadsheet
      const ss = new Spreadsheet(spreadsheet.value, {
        lang: 'zh-cn', // 确保这里也设置为 'zh-cn'
        rowHeight: 30,
        colWidth: 100,
        menu: false, // 禁用默认菜单
        toolbar: true, // 启用工具栏
        view: {
          showGrid: true,
        },
      });

      // 将实例保存到 this 上下文中以便后续使用
      Object.assign(this, { ss });
    });

    const onFileChange = async (e) => {
      const file = e.target.files[0];
      if (file) {
        const workbook = new ExcelJS.Workbook();
        await workbook.xlsx.load(file.arrayBuffer());

        // 假设我们只处理第一个工作表
        const worksheet = workbook.worksheets.get(0);
        const data = [];

        worksheet.eachRow((row, rowNumber) => {
          const rowData = [];
          row.eachCell((cell, colNumber) => {
            rowData.push(cell.text);
          });
          data.push(rowData);
        });

        // 更新 x-data-spreadsheet 的数据源
        this.ss.loadData({
          sheet1: {
            name: 'Sheet1',
            data: data.map((row, rowIndex) => row.map((cell, colIndex) => ({
              value: cell,
              style: {
                textAlign: 'center',
                verticalAlign: 'middle'
              }
            }))),
          }
        });
      }
    };

    const saveFile = () => {
      const data = this.ss.getData().sheet1.data;

      const workbook = new ExcelJS.Workbook();
      const worksheet = workbook.addWorksheet('Sheet1');

      data.forEach((row, rowIndex) => {
        row.forEach((cell, colIndex) => {
          worksheet.getCell(colIndex + 1, rowIndex + 1).value = cell.value;
        });
      });

      // 导出 XLSX 文件
      workbook.xlsx.writeBuffer().then((buffer) => {
        const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'modified_file.xlsx';
        a.click();
        window.URL.revokeObjectURL(url);
      });
    };

    return {
      onFileChange,
      saveFile,
      spreadsheet
    };
  }
};
</script>

<style>
/* 引入 x-data-spreadsheet 的样式 */
@import 'x-data-spreadsheet/dist/xspreadsheet.css';
</style>

3. 运行你的应用

确保你已经正确设置了 Vue 项目，并且所有依赖都已正确安装。然后运行你的应用，你应该能够看到一个文件上传按钮，选择一个 XLSX 文件后，文件内容会显示在 x-data-spreadsheet 中供编辑。编辑完成后，点击“下载修改后的文件”按钮即可保存更改后的 XLSX 文件。

注意事项

语言设置：通过 Spreadsheet.locale('zh-cn', zhCN); 设置语言为中文（简体），并在初始化 x-data-spreadsheet 时确保 lang 选项也设置为 'zh-cn'。
样式和配置：x-data-spreadsheet 提供了丰富的配置选项，可以根据需要自定义表格的行为和外观。例如，你可以启用或禁用菜单、工具栏、网格线等。
性能优化：对于大型文件或复杂的工作簿，考虑在服务器端进行处理以优化性能。
许可证：如果你的项目是商业用途，请确保你有合法的许可证来使用 x-data-spreadsheet 和 ExcelJS。