Vue 解析本地 Excel 文件并添加接口返回数据到最后一行(非最后一列)并导出
以下是一个简单的 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 文件包含多个工作表,您需要相应地修改代码。
原文地址: https://www.cveoy.top/t/topic/oIyG 著作权归作者所有。请勿转载和采集!