记一个压缩包下载方法

在开发中遇到ZIP 压缩包文件下载的需求,在此记录一下。
我这里是有后端返回 ZIP 的流文件。才用了如下方法处理。

this.$api.gameApi.downloadZIP(this.gameInformation.id,row.id).then(res => {
      const blob = new Blob([res.data], {type: 'application/zip'})
      const url = window.URL.createObjectURL(blob)
      const link = document.createElement('a') // 创建a标签
      link.href = url
      link.download = row.name // 重命名文件
      link.click()
      URL.revokeObjectURL(url) // 释放内存
  })

单纯这么使用,下载下来的压缩包打不开,需要对 axios 进行如下配置

 downloadZIP(id, bundlesId) {
    return $axios({
      methods: "get",
      url: `/v1/${id}/material/bundle/${bundlesId}`,
      responseType: 'blob'
    })
  },

添加: responseType: 'blob' 即可。


后续补充:
当后端提供下载地址的时候,前端可以直接下载。方法如下:
这里是使用 el-upload 组件提供的 :on-preview 方法。

handlePreview(file){
  const a = document.createElement('a');
  if (typeof a.download !== 'undefined') {
    a.href = file.url
    a.download = file.name
    document.body.appendChild(a);
    a.click();
    a.remove();
  }else {
    window.location = file.url
    // window.open(file.url)
  }
},

这是利用 a标签提供的download方法,实现下载功能的。
当判断浏览器不支持 download 方法时,可以调用 window.locationwindow.open 方法下载文件。
window.location 可以在当前页面下载。
window.open 将会打开新的窗口,进行下载。

知道的越多,不知道的也就越多。

26 声望
4 粉丝
0 条评论
推荐阅读
DOM树问题
在项目遇到客户端DOM和服务端内容不一致的问题,在本地运行时,不会由任何影响,当项目部署上线之后,产生的问题就很严重了,对导致项目页面打不开。问题重现:HTML代码:

A_Ghost阅读 734

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy49阅读 7.4k评论 12

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 7k评论 12

封面图
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs32阅读 3.6k评论 5

封面图
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城29阅读 6.4k评论 5

封面图
2022大前端总结和2023就业分析
我在年前给掘金平台分享了《2022年热点技术盘点》的前端热点,算是系统性的梳理了一下我自己对前端一整年的总结。年后,在知乎上看到《前端的就业行情怎么样?》,下面都是各种唱衰前端的论调,什么裁员,外包化...

i5ting27阅读 2.4k评论 4

封面图
深入理解React Diff算法
fiber上的updateQueue经过React的一番计算之后,这个fiber已经有了新的状态,也就是state,对于类组件来说,state是在render函数里被使用的,既然已经得到了新的state,那么当务之急是执行一次render,得到持有新...

nero31阅读 11.8k评论 3

知道的越多,不知道的也就越多。

26 声望
4 粉丝
宣传栏