uniapp 下载文件/二进制流数据文件 ,保存文件 ,打开文件。以及H5下载二进制流文件。

前提注意点

  • downloadFile 发送的是GET请求。
  • 如果url接口返回的是二进制流数据。则要求后端content-type 里面填写具体的返回文件类型。否则下在的文件会没有后缀名。比如excel是 application/vnd.ms-excel
  • 移动端不支持Blob。

移动端下载

		//下载文件
      uni.downloadFile({//只能是GET请求
        url: "xxxxxxx",//请求地址
        header:{
          'Authorization': uni.getStorageSync('Authorization')//请求头。
        },
        success: (res) => {
        	//下载成功
          if (res.statusCode === 200) {
            //保存文件
            uni.saveFile({
              tempFilePath:res.tempFilePath,//下载成功之后返回的临时路径
              success:(e)=>{
                //保存成功之后 打开文件
                uni.openDocument({
                  filePath: e.savedFilePath,
                  fail:(e)=>{
                    uni.showToast({
                      title: `打开失败`+e
                    })
                  }
                })
              },
              fail:(e)=>{
                uni.showToast({
                  title: `保存失败`+e
                })
              }
            })
          }
        },
        fail:(e)=>{
          this.isDownloading=false
          uni.showToast({
            title: `文件下载失败`+e,
            icon: "none",
          })
        }
      });

h5下载。需要将返回的二进制流数据用blob转换下。

try {
        const res = await exportOrderById({ id });//获取返回的二进制数据
        if (res.code && res.code === 500)
          return this.$message.error("导出失败");
        const blob = new Blob([res]); // 通过返回的流数据 手动构建blob 流
        const reader = new FileReader();
        reader.readAsDataURL(blob); // 转换为base64,可以直接放入a标签的href
        reader.onload = (e) => {
          // 转换完成,创建一个a标签用于下载
          const a = document.createElement("a");
          a.download = surgicalName + ".xls"; // 构建 下载的文件名称以及下载的文件格式(可通过传值输入)
          if (typeof e.target.result === "string") {
            a.href = e.target.result;
          }
          a.click();
        };
      } catch (err) {
        this.$message.error("遇到错误!");
      }
  • 3
    点赞
  • 35
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值