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

这篇具有很好参考价值的文章主要介绍了前端常用的上传下载文件的几种方式，直接上传、下载文件，读取.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文章来源地址https://www.toymoban.com/news/detail-653188.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函数
            });
        }