vue 通过 Blob实现异步下载文件

喜欢ヅ旅行 2021-11-16 13:48 1182阅读 0赞

> 前言:
> 
> 我是使用 vue-element-admin 里面统一封装了,请求配置 和 响应 拦截器.
> 
> 通过 window.open(url) 的方式,下载失败不但不能拿到错误信息,而且 还会跳页面.
> 
> 体验很差.于是使用了,blob 的方式异步下载文件.

代码:

// 下载文件的具体方法,data 是异步响应体,fileName是文件名 
      download (data,fileName) {
            if (!data || data.code==500) { return }
            let url = window.URL.createObjectURL(new Blob([data]))
            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); // 下载完成移除元素
            window.URL.revokeObjectURL(url); // 释放掉blob对象
        },
      // 调用上面的方法,下载文件
      downLoadFile(url,fileName,loadingName){
            this[loadingName] = true
            // 这里是异步请求
            this.$api.utils.down(url,{}).then(res=>{
                this.download(res,fileName)
                this[loadingName] = false
            })
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，1182人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue实现文件下载

引言最近在自己做项目的需求的过程中，需要`vue+springboot`实现文件的下载功能（导出博客文件）。问题重现在我后端文件下载接口开发完成后，使用vu

灰太狼/ 2023年09月23日 19:37/ 0 赞/ 180 阅读

相关 vue实现文件下载

var reader = new FileReader(); reader.readAsDataURL(blob); // 转换为base64，可以直接放入

浅浅的花香味﹌/ 2023年07月12日 03:37/ 0 赞/ 269 阅读

相关 vue 使用Blob实现下载xls文件

1 页面代码 <el-button size="mini" id='testBtn2' @click="test"><i class=" fa fa-search " ari

分手后的思念是犯贱/ 2023年06月27日 04:28/ 0 赞/ 83 阅读

相关 vue 通过blob下载流文件

在web端的管理系统中常会用到的功能就是下载文件（包含excel、word、txt等），今天我就来说一说我是如何实现的。下载有两种形式，一种是后台接口直接返回下载的路径，根

系统管理员/ 2023年03月01日 05:34/ 0 赞/ 21 阅读

相关 blob对象实现文件、图片下载

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

ゝ一世哀愁。/ 2022年12月29日 06:34/ 0 赞/ 266 阅读

相关 Vue 前端导出、下载zip/excel文件流blob

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp5aW95YOP5b6I5Ya35LqG

末蓝、/ 2022年12月07日 01:24/ 0 赞/ 444 阅读

相关接口返回二进制文件流,前端通过blob对象实现下载

1、[https://www.jianshu.com/p/d175e6058b1b][https_www.jianshu.com_p_d175e6058b1b] 2、[ht

喜欢ヅ旅行/ 2022年02月02日 09:27/ 0 赞/ 388 阅读

相关 vue 通过 Blob实现异步下载文件

> 前言: > > 我是使用 vue-element-admin 里面统一封装了,请求配置和响应拦截器. > > 通过 window.open(url) 的方式,下载

喜欢ヅ旅行/ 2021年11月16日 13:48/ 0 赞/ 1183 阅读

相关 vue(二) vue中使用blob下载文件

1.post请求上传后对后端解析文件，然后下载 uploadSectionFile(param) { const self = this;

左手的ㄟ右手/ 2021年11月10日 07:50/ 0 赞/ 680 阅读

相关 vue+iview 通过a标签实现文件下载

vue+iview 通过a标签实现文件下载方法一：注意: 如果下载的文件放在本地目录下，一定要将模板文件放到 public 目录下，否则由于权限问题找不到文件路

Dear 丶/ 2021年11月09日 09:54/ 0 赞/ 488 阅读