vue3 xlsx.js excel表格插入新列

在Vue3中使用xlsx.js库操作Excel文件时，如果你想向已有表格插入新列，可以按照以下步骤进行：

1. 首先，你需要安装`xlsx`库以及`vue-xlsx`这个轻量级的Vue封装库，以便在组件中更方便地处理Excel数据。你可以通过npm或yarn进行安装：

   npm install xlsx vue-xlsx
   # 或者
   yarn add xlsx vue-xlsx

2. 在你的Vue组件中，引入并初始化xlsx模块，并读取现有的Excel文件：

import XLSX from 'xlsx';

export default {
  data() {
    return {
      workbook: {},
    };
  },
  async mounted() {
    const file = this.$refs.file; // 假设你有一个file输入元素
    if (file.files.length > 0) {
      const fileContent = await new Promise((resolve) => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result);
        reader.readAsArrayBuffer(file.files[0]);
      });

      const { SheetNames, Sheets } = XLSX.read(fileContent, { type: 'binary' });
      this.workbook = XLSX.utils.book_new();
      for (const sheetName of SheetNames) {
        XLSX.utils.sheet_add_data(this.workbook, XLSX.utils.json_to_sheet(Sheets[sheetName]));
      }
    }
  },
}

3. 现在你已经有了工作簿对象，接下来可以在`methods`中定义一个函数来添加新列：

methods: {
  addNewColumn(columnName, columnIndex) {
    // columnIndex是从左往右开始计数的，例如0表示第一列
    const newColData = new Array(this.workbook.Sheets[Object.keys(this.workbook.Sheets)[0]].data.length).fill(null); // 创建全空数组作为新列

    // 将新列数据添加到所有sheet中
    for (const sheetName in this.workbook.Sheets) {
      const sheet = this.workbook.Sheets[sheetName];
      const ws = XLSX.utils.aoa_to_sheet(sheet.data);
      ws[columnIndex] = newColData;
      const updatedSheet = XLSX.utils.sheet_to_json(ws);
      this.workbook.Sheets[sheetName] = XLSX.utils.json_to_sheet(updatedSheet);
    }
  },
},

4. 调用`addNewColumn`函数并传入新列名和位置：

this.addNewColumn('New Column Title', 5); // 假设你想在第6列插入新列，索引从0开始

// 更新工作簿的数据
XLSX.writeFile(this.workbook, 'output.xlsx');

现在你应该能看到新列已成功插入到Excel表格中。