前端通过new Blob下载文档流(下载zip或excel)

当后端返回这样的预览:

前端该如何下载呢?首先在axios请求里,加入第三个参数{ responseType: 'blob' }。

复制代码
proxy.$post(url, params, { responseType: 'blob' }).then((res)=>{
  downloadFormat(res)
});

然后在一个函数里处理返回,创建a标签来下载

复制代码
// 这里是下载zip文件的处理

const downloadFormat = (res) => {
  if (!res.data) {
    return;
  }
  let stringName = res.headers['content-disposition'].split(';')[1];// 一般来说,文件名字后端都在返回头里,前后端可以约定文件名前用 @ 符号分隔,便于取值,用其他符号也可以。
  let fileName = stringName.split('=')[1];// 获取到了后缀名
  const blob = new Blob([res.data], { type: 'application/zip' }); // application/zip就是设置下载类型,需要设置什么类型可在标题二处查看,
  const url = window.URL.createObjectURL(blob); // 设置路径
  const link = window.document.createElement('a'); // 创建a标签
  link.href = url;
  link.setAttribute('download', fileName); // 给下载后的文件命名
  link.style.display = 'none';
  link.click();
  URL.revokeObjectURL(url); // 释放内存
}

// 这里是下载excel的处理, 可根据需要传文件名和文件类型

const downloadFormat = (res, fileName, fileType) => {

  let stringName = res.headers['content-disposition'].split(';')[1];
  let fileName = stringName.split('=')[1];

  const blob = new Blob([res.data], { type: fileType ?? 'application/vnd.ms-excel' });

  // application/vnd.ms-excel 表示.xls文件
  // application/vnd.openxmlformats-officedocument.spreadsheetml.sheet 表示.xlsx文件
  
  // 也可以不写type,反正是下载,又不是上传。

  if (!blob) {
    return;
  }

  const url = window.URL.createObjectURL(blob);

  const link = document.createElement('a');
  link.style.display = 'none';
  link.href = url;
  link.setAttribute('download', fileName);

  document.body.appendChild(link);
  link.click();
  window.URL.revokeObjectURL(url); // 为了性能和内存使用状况,应该在适当的时候释放url
}

还有一种get方式通过window.location.href来下载文件,在浏览器F12网络里预览和响应没有返回值,写法如下

复制代码
window.location.href = '/api/exportData?ids=' + 拼接的参数

其中/api被代理转发了,在vite.config.js文件里config.server.proxy对象配置如下:

"/api": {
  target: "https://test.XXX.net",
  secure: false,
  changeOrigin: true,
}

// 真实请求地址含api,并未被reWrite为空
相关推荐
GIS之路17 分钟前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
烛阴25 分钟前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥29 分钟前
HTML之表单结构全解析
前端·html
聪聪的学习笔记40 分钟前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
小磊哥er1 小时前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端
菌菇汤1 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶1 小时前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
qq_411671982 小时前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
清幽竹客3 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim3 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js