前端blob下载文件

在一个项目中, 需要下载excel, pdf, word, zip等数据模板, 而后端返回的是一个文件流, 前端就需要使用blob来下载
1.首先要在接口中添加 responseType: ‘blob’,

// 模板下载
export function downLoadModule(url,params = {}) {return request({url: url,method: 'get',responseType: 'blob',params})
}

通过Blob对象，我们在前端代码中就可以动态生成文件，提供给浏览器下载, 在每次调用createObjectURL()方法时，都会创建一个新的URL对象，即使你已经用相同的对象作为参数创建过。当不再需要这些URL对象时，每个对象必须通过调用URL.revokeObjectURL()方法来释放。浏览器会在文档退出时自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。
window.URL.revokeObjectURL(objectURL);

3.new Blob()中的type类型可以参考MDN:
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types

// 下载模板let res = await downLoadModule(this.downLoadModuleUrl,{});console.log('模板地址',res)let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});console.log("res", res);console.log("blob", blob);const $link = document.createElement("a");$link.href = URL.createObjectURL(blob);$link.download = `${this.title}数据模板.xlsx`$link.click();document.body.appendChild($link);document.body.removeChild($link); // 下载完成移除元素window.URL.revokeObjectURL($link.href); // 释放掉blob对象

前端blob下载文件相关推荐

vue使用blob下载文件
//封装好的api export function downFile(url, parameter) {return axios({url: url,params: parameter,method: ...
react将前端Blob类型文件传到后台
react将前端Blob类型文件传到后台最近在做一个关于语音识别的功能,具体需求是用户在线录制音频提交给后台,后台转写成文字输出txt文本.我使用的是一个第三方类库recordmp3.js,可以录制 ...
post方式返回文件流实现前端blob下载,responseType: ‘blob‘无效
responseType: 'blob' 一般情况下,下载分为好几种,但是常用的是get下载文件流直接下载 post下载文件流是很少见的,但是鉴于参数太多,不能走get 只能走post下载,post下 ...
记录一下前端针对下载文件的两种请求方式
之前做了很多下载文件的接口都没习惯进行记录,现在开始规范自己,让自己养成一个随手保存代码的好习惯.写的不足之处请指出,会改正. 说一下前端下载文件常用的两种方式,get请求和post请求 get请求相 ...
前端通用下载文件方法（兼容IE10及以上）
之前在网上看到一个博主写的前端通用的下载文件的方法,个人觉得很实用,所以mark一下,方便以后查阅源文地址(源文还有上传/下载excel文件方法) 因为项目要求要兼容IE浏览器,所以完善了一下之前博 ...
web前端批量下载文件和图片探索
1.图片,文件批量下载(不跨域的情况下) import JSZip from 'jszip'; import {saveAs} from 'file-saver'; import axios from ...
前端：下载文件(多种方法)
一.简介前端经常会有下载文件的需求,这里总结了几种常用的方法,方便日后查看. 二.a标签下载 <a href="https://abc.png" download=&quo ...
前端实现下载文件（包含压缩包下载）方式汇总
默认最简单的下载方式是:window.open(后台接口API路径),但该方法弊端:因是新开窗口方式,前端展示上,每次会闪下. 此外,如果使用window.open(文件URL)方式: pdf.off ...
前端js下载文件压缩包
工作当中时常会遇到对文件的一些处理,比如下载表格.下载图片.下载文件等,这里说一种下载压缩包的方法. 其实也很简单,需要用到一款插件jszip,官方用法都是有的:https://www.npmjs.c ...

前端blob下载文件

前端blob下载文件相关推荐

最新文章

热门文章