一、通过调用接口下载文件

1.1根据文件流Blob进行下载

const onExport = async () => { try { let res = await axios.request({ method: 'POST', url: '请求地址', responseType: 'blob', params: { data: null }, headers: { Authorization: 'Bearer ' + UserModule.token },//看看请求是否需要token }); let reader = new FileReader(); let data = res.data; reader.onload = (e: any) => { try { let fileName = window.decodeURI( decodeURIComponent(decodeURI(res.headers['content-disposition'].split(`''`)[1])) ); let url = window.URL.createObjectURL(new Blob([data], { type: res.headers['content-type'] })); let link = document.createElement('a'); link.style.display = 'none'; link.href = url; link.setAttribute('download', fileName); document.body.appendChild(link); link.click(); document.body.removeChild(link); } catch (e: any) { message.error(e); } }; reader.readAsText(data); } catch (err) { message.error('导出失败'); }};

1.2根据下载文件链接直接进行下载

downloadFile(fileDownloadUrl) { const downloadLink = document.createElement("a"); downloadLink.href = fileDownloadUrl;//文件地址 // 设置下载文件的名称（可选） downloadLink.download = "yourFileName.ext"; // 将 <a> 元素添加到 DOM 中 document.body.appendChild(downloadLink); // 模拟点击触发下载 downloadLink.click(); // 从 DOM 中移除 <a> 元素 document.body.removeChild(downloadLink); }

二、将数组的对象数据导出到.xlsx文件中

fnExport() { let data = []; let temp = [ { name:'小周', sex:'男', nation:'汉族' }, { name:'小林', sex:'女', nation:'汉族' }, ] temp.forEach((item: models.ExpertEditModel) => { data.push({ 姓名: item.name, 性别: item.sex, 民族: item.nation, }); }); const ws = XLSX.utils.json_to_sheet(data); // 新建book const wb = XLSX.utils.book_new(); // 生成xlsx文件(book,sheet数据,sheet命名) XLSX.utils.book_append_sheet(wb, ws, '数据详情'); // 写文件(book,xlsx文件名称) XLSX.writeFile(wb, '基本信息.xlsx'); }

三、请求接口上传文件给后端

async beforeAvatarUpload(file: any, fList: any) { if (!file) { this.$message.error('请先添加文件'); } else { if (file) { try { const formData = new FormData(); formData.append('file', file); //await api.Organizations.EduUploadSchool_PostAsync(formData); // 发起POST请求axios.request({ method: 'post', url: 'your_backend_url', data: formData, headers: { 'Content-Type': `multipart/form-data; boundary=${ formData._boundary}`, // You might need other headers depending on your backend requirements }}) this.$message.success('上传成功'); } catch (err) { this.$message.error('上传失败:' + err.message); } } } }

四、读取用户上传的.xlsx文件内容转成数组

html

<el-upload action="" accept=".xlsx" :before-upload="getExcelFile" > <el-button size="small" type="primary">点击上传</el-button> </el-upload>

async getExcelFile(file) { if (!/\.(xlsx)$/.test(file.name.toLowerCase())) { console.log("请上传.xlsx格式的Excel文件"); } else if (file) { try { const res = await this.readExcel(file);//调用解析.xlsx文件方法 } catch (error) { console.log("上传错误：", error); } } }, // 解析Excel readExcel(file) { return new Promise((resolve, reject) => { const reader = new FileReader();//创建FileReader对象，您可以将文件内容读取到内存中 let getExcelList = [];// 用于存储从Excel中提取的数据 reader.onload = (e) => { try { let data = e.target.result; let workbook = XLSX.read(data, { type: "binary" }); // 遍历工作表 for (let item in workbook.SheetNames) { let SheetName = workbook.SheetNames[item]; let sheetInfos = workbook.Sheets[SheetName]; // 将工作表内容转换为JSON格式 let excel = XLSX.utils.sheet_to_json(sheetInfos, { raw: true }); // 遍历每行数据并将特定字段添加到getExcelList数组中 excel.forEach((item) => { getExcelList.push({ name: item.姓名 ?? "", nation: item.民族 ?? "", school: item.学校 ?? "", }); }); } console.log( "%c [ getExcelList ]-53", "font-size:13px; background:pink; color:#bf2c9f;", getExcelList ); resolve(getExcelList);// 成功解析并处理Excel文件，返回getExcelList数组 } catch (e) { reject(e); } }; // console.log('teacherUploadList', teacherUploadList); reader.readAsBinaryString(file);// 以二进制字符串形式读取上传的Excel文件内容，解析成功则调用reader.onload函数 }); }