vue解析本地excel文件添加接口返回数据到最后一行不是最后一列并导出
要实现这个需求,需要使用以下技术:
-
使用
xlsx库来解析本地的 Excel 文件并读取数据。 -
使用
axios库来发送 POST 请求并获取接口返回的数据。 -
使用
xlsx库来将接口返回的数据添加到 Excel 文件的最后一行。 -
使用
file-saver库来将最终的 Excel 文件导出。
以下是一个基本的实现方案:
import * as XLSX from 'xlsx';
import axios from 'axios';
import { saveAs } from 'file-saver';
// 读取本地 Excel 文件
const fileReader = new FileReader();
fileReader.onload = (event) => {
const data = new Uint8Array(event.target.result);
const workbook = XLSX.read(data, { type: 'array' });
const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];
// 获取最后一行的行号
const lastRowIndex = worksheet['!range'].e.r;
// 发送 POST 请求获取接口返回的数据
axios.post('/api/data')
.then(response => {
const newData = response.data;
// 将接口返回的数据添加到最后一行
Object.keys(newData).forEach((key, index) => {
const cellAddress = XLSX.utils.encode_cell({ r: lastRowIndex + index + 1, c: 0 });
worksheet[cellAddress] = { t: 's', v: newData[key].name };
const cellAddress2 = XLSX.utils.encode_cell({ r: lastRowIndex + index + 1, c: 1 });
worksheet[cellAddress2] = { t: 'n', v: newData[key].value };
});
// 导出 Excel 文件
const newWorkbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(newWorkbook, worksheet, sheetName);
const wbout = XLSX.write(newWorkbook, { bookType: 'xlsx', type: 'array' });
const fileName = 'new-data.xlsx';
const blob = new Blob([wbout], { type: 'application/octet-stream' });
saveAs(blob, fileName);
})
.catch(error => {
console.error(error);
});
};
fileReader.readAsArrayBuffer(file);
需要注意的是,此示例假设 Excel 文件中只有一个工作表,并且该工作表的第一行为表头行。如果您的 Excel 文件结构不同,您可能需要进行适当的修改来满足您的特定需求
原文地址: http://www.cveoy.top/t/topic/hfDq 著作权归作者所有。请勿转载和采集!