xlsx版本 0.18.5 react版本 17.0.2
前提:使用 xlsx.readFile(`${process.env.PUBLIC_URL}/test.xlsx`) 无法拿到文件,但a.href时可以拿到文件 。
原因:
- 使用
a.href
时,它是基于浏览器环境,可以使用相对路径进行文件加载 XLSX.readFile
方法主要是用于在服务器端运行的情况下加载本地文件
解决方案:
import * as XLSX from 'xlsx';
* 下载文件
* */
async function addDataToWorkbook() {
try {
const response = await fetch(`${process.env.PUBLIC_URL}/test.xlsx`);
const arrayBuffer = await response.arrayBuffer();
const data = new Uint8Array(arrayBuffer);
const workbook = XLSX.read(data, { type: 'array' });
// 1.获取第一个工作表
const sheetName = workbook.SheetNames[0];
const sheet = workbook.Sheets[sheetName];
// 2. 获取第一行作为模板
const templateRow = XLSX.utils.sheet_to_json(sheet, { header: 1 })[0];
// 3. 清空工作表中的数据(除第一行外)
const range = XLSX.utils.decode_range(sheet['!ref']);
for (let rowNum = range.s.r + 1; rowNum <= range.e.r; rowNum++) {
const rowAddress = XLSX.utils.encode_row(rowNum);
for (let colNum = range.s.c; colNum <= range.e.c; colNum++) {
const cellAddress = XLSX.utils.encode_col(colNum) + rowAddress;
delete sheet[cellAddress];
}
}
// 4. 添加数据到工作表
const rows = [
['John', 'Jane'],
[28, 32],
// ... Add more data
];
XLSX.utils.sheet_add_aoa(sheet, [templateRow, ...rows], { origin: 0 });
// 5. 生成新的 Excel 文件
const updatedWorkbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(updatedWorkbook, sheet, sheetName);
const updatedData = XLSX.write(updatedWorkbook, { bookType: 'xlsx', type: 'array' });
// 6. Download the new Excel file
const blob = new Blob([updatedData], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
});
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'updated.xlsx';
link.click();
} catch (error) {
console.error('加载文件出错:', error);
}
}