前端常用的上传下载文件的几种方式，直接上传、下载文件，读取.xlsx文件数据，导出.xlsx数据

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

1.1根据文件流Blob进行下载

constonExport=async()=>{try{let res =await axios.request({method:'POST',url:'请求地址',responseType:'blob',params:{data:null},headers:{Authorization:'Bearer '+ UserModule.token },//看看请求是否需要token});let reader =newFileReader();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(newBlob([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);// 新建bookconst wb =XLSX.utils.book_new();// 生成xlsx文件(book,sheet数据,sheet命名)XLSX.utils.book_append_sheet(wb, ws,'数据详情');// 写文件(book,xlsx文件名称)XLSX.writeFile(wb,'基本信息.xlsx');}

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

asyncbeforeAvatarUpload(file: any,fList: any){if(!file){this.$message.error('请先添加文件');}else{if(file){try{const formData =newFormData();
          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>

asyncgetExcelFile(file){if(!/\.(xlsx)$/.test(file.name.toLowerCase())){
                console.log("请上传.xlsx格式的Excel文件");}elseif(file){try{const res =awaitthis.readExcel(file);//调用解析.xlsx文件方法}catch(error){
                    console.log("上传错误：", error);}}},// 解析ExcelreadExcel(file){returnnewPromise((resolve, reject)=>{const reader =newFileReader();//创建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函数});}