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

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

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函数            });        }