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

喜欢ヅ旅行 2021-11-16 13:48 987阅读 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 条评论，987人围观）

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

相关阅读

相关 vue实现文件下载

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

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

相关 vue实现文件下载

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

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

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

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

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

相关使用eggjs + axios post方式通过blob对象进行文件下载

以下是egg.js的后台代码 const Controller = require('egg').Controller; const path = requi

今天药忘吃喽~/ 2022年12月28日 09:17/ 0 赞/ 252 阅读

相关前端下载文件(blob流文件下载及修改下载文件名称)

项目中经常遇到文件下载需求，有时候后台返回的是一个blob流文件（就是看起来像是乱码的数据），这时就需要前端对文件进行处理，或展示，或下载。故这里简单实现一下blob流文件下载

一时失言乱红尘/ 2022年12月27日 14:03/ 0 赞/ 283 阅读

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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp5aW95YOP5b6I5Ya35LqG

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

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

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

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

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

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

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

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

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

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

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

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

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