下载文件 | 下载流文件的处理方式

简介: 当下载文件时,返回为流的形式,所以在请求的时候设置 responseType:’arraybuffer’ 或者设置为 responseType: ‘blob’ 的时候,只有当接口返回正确的时候才会下载文件,返回错误的时候,应该是提示用户出错了,但是使用 arraybuffer 或者 blob 的时候,错误的信息也是返回这个形式的。所以需要转换一下。

image.png

“当下载文件时,返回为流的形式,所以在请求的时候设置 responseType:’arraybuffer’ 或者设置为 responseType: ‘blob’ 的时候,只有当接口返回正确的时候才会下载文件,返回错误的时候,应该是提示用户出错了,但是使用 arraybuffer 或者 blob 的时候,错误的信息也是返回这个形式的。所以需要转换一下。”

01 responseType:'arraybuffer'

当接口返回后,在 then 中接收到返回的数据 res ,需要转换。

try {
  const str = JSON.parse(
    new TextDecoder("utf-8").decode(new Uint8Array(res))
  );
  console.log("str", str);
  if (str.code === 500) {
    this.$message.error(`${str.msg}`);
  }
} catch (_) {
  const en = decodeURIComponent("考勤模板.xlsx");
  const blob = new Blob([res], {
    type: "application/vnd.ms-excel;charset=utf-8;charset=UTF-8",
  });
  if (window.navigator.msSaveOrOpenBlob) {
    // 兼容ie
    window.navigator.msSaveBlob(blob, en);
  } else {
    const downloadElement = document.createElement("a");
    // 创建下载的链接
    downloadElement.href = window.URL.createObjectURL(blob);
    downloadElement.download = en; // 下载后文件名
    document.body.appendChild(downloadElement);
    // 此写法兼容火狐
    const evt = document.createEvent("MouseEvents");
    evt.initEvent("click", false, false);
    downloadElement.dispatchEvent(evt);
    document.body.removeChild(downloadElement);
  }
}

02 responseType:'blob'

和前面的基本一样,但是在转换的时候有点差别
只需要将前面的 const str = JSON.parse(new TextDecoder("utf-8").decode(new Uint8Array(res))) 换成 const str = JSON.parse(res)即可。

相关文章
|
18天前
|
存储 Java API
Java实现导出多个excel表打包到zip文件中,供客户端另存为窗口下载
Java实现导出多个excel表打包到zip文件中,供客户端另存为窗口下载
25 4
|
6月前
归档及压缩、重定向与管道操作、创建链接
归档及压缩、重定向与管道操作、创建链接
|
6月前
|
移动开发 前端开发
VForm3的文件上传后的一种文件回显方式
VForm3的文件上传后的一种文件回显方式
119 0
|
对象存储
使用流式下载从阿里OSS获取PDF文件时,确保正确处理输入流的读取。
使用流式下载从阿里OSS获取PDF文件时,确保正确处理输入流的读取。
152 1
|
JSON 前端开发 JavaScript
前端下载二进制流文件
前端下载二进制流文件
349 0
|
前端开发 网络协议 API
大文件处理(上传,下载)思考
在计算文件hash的方式,主要有以下几种: 分片全量计算hash、抽样计算hash。在这两种方式上,分别又可以使用web-work和浏览器空闲(requestIdleCallback)来实现.
大文件处理(上传,下载)思考
|
缓存 Java
sevlet实现下载文件功能
希望做一个小板块,实现文件的上传和下载,那么上传实现了,就需要实现下载,阅读了各位的博客总结了一下。在网页中通过超链接是可以访问我的资源的,浏览器不可访问的资源他就会下载到本地,像一些浏览器可以直接访问的如图片,txt文件浏览器会直接打开。这就需要我们在sevlet中统一处理文件下载。
143 0
sevlet实现下载文件功能
|
前端开发
文件下载的几种方式
文件下载的几种方式
一个H264流,保存成多个文件需要注意的两个问题
一个H264流,保存成多个文件需要注意的两个问题
178 0