以下是一个简单的 Vue 示例代码,演示如何使用 JavaScript 解析本地 Excel 文件,将接口返回数据添加到 Excel 最后一行中(非最后一列),然后将修改后的 Excel 文件导出。

首先需要安装 xlsx 和 file-saver 库,可以使用 npm 命令进行安装:

npm install xlsx file-saver --save

然后在 Vue 组件中添加以下代码:

<template>
  <div>
    <input type='file' @change='handleFileUpload' />
    <button @click='exportExcel'>Export Excel</button>
  </div>
</template>

<script>
import XLSX from 'xlsx';
import { saveAs } from 'file-saver';

export default {
  data() {
    return {
      fileData: null,
      sheetName: 'Sheet1',
      tableData: []
    };
  },
  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 worksheet = workbook.Sheets[this.sheetName];
        this.tableData = XLSX.utils.sheet_to_json(worksheet);
        this.addNewRow();
      };
      reader.readAsArrayBuffer(file);
    },
    addNewRow() {
      // Call API to get data and add it to tableData as new row
      // Example API endpoint: https://jsonplaceholder.typicode.com/todos/1
      fetch('https://jsonplaceholder.typicode.com/todos/1')
        .then(response => response.json())
        .then(data => {
          const newRow = {
            id: data.id,
            title: data.title,
            completed: data.completed
          };
          // 在 tableData 的最后一行添加数据
          this.tableData[this.tableData.length - 1] = { ...this.tableData[this.tableData.length - 1], ...newRow };
        });
    },
    exportExcel() {
      const worksheet = XLSX.utils.json_to_sheet(this.tableData);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, this.sheetName);
      const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
      const excelBlob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      saveAs(excelBlob, 'data.xlsx');
    }
  }
};
</script>

在这个例子中,我们首先使用 `` 元素让用户选择本地 Excel 文件。当用户选择文件并上传时,我们使用 FileReader API 读取文件内容,并使用 XLSX 库解析 Excel 文件。

我们将 Excel 文件的数据存储在 `tableData` 数组中,并使用 `addNewRow()` 方法调用 API 获取数据并将其添加为最后一行。最后,我们使用 `exportExcel()` 方法将修改后的 Excel 数据导出为新的 Excel 文件。

在 `exportExcel()` 方法中,我们将 `tableData` 数组转换为工作表,然后将其添加到新的工作簿中。然后,我们将工作簿写入 Excel 文件并使用 FileSaver 库将其保存到用户的本地文件系统中。

注意,这个例子中调用的 API 仅用于演示目的。您需要根据自己的需求替换它。此外,该例子仅处理单个工作表的 Excel 文件。如果您的 Excel 文件包含多个工作表,您需要相应地修改代码。

Vue 解析本地 Excel 文件并添加接口返回数据到最后一行(非最后一列)并导出

原文地址: https://www.cveoy.top/t/topic/oIyG 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录