链接文件转blob格式下载（浏览器）

留自省。
在项目中遇到下载的问题。
Desc：原上传到阿里服务器后返回的Url，保存到自己数据库中后自家服务器再次返回以拼接好的完整Url供前端下载该文件.
本打算通过a链接的方式直接下载。又因为它是浏览器可知文件不好去下载。故而通过Url转Blob格式去执行下载功能.;

参考了网上得资料；现记录

util.js

// 发送请求乃异步操作。 故而需要用callback继续调用
// 返回类型需要更改成“blob”格式
export function urlToBlob(the_url, fileName, callback) {let xhr = new XMLHttpRequest();xhr.open("get", the_url, true);xhr.responseType = "blob";xhr.onload = function() {if (this.status == 200) {callback && callback(this.response, fileName)}};xhr.send();
}

index.vue[methods]

// preview on off-line. download.
// element-ui event 'handlePreview'
handlePreview(file) {urlToBlob(file.url, file.name, this.downloadFile)
},downloadFile(blobExample, fileName) {if(!blobExample) return// 创建一个Url...let url = window.URL.createObjectURL(blobExample)// let url = window.URL.createObjectURL(new Blob([data])) // blob failed.// 逻辑生成<a>执行点击,完成下载let link = document.createElement('a')link.style.display = 'none'link.href = urllink.setAttribute('download', fileName)document.body.appendChild(link)link.click();document.body.removeChild(link)
},

需注意的内容

# window.URL.createObjectURL.
# Blob.
# XMLHttpRequest.

有问题请留言。

链接文件转blob格式下载（浏览器）相关推荐

file文件转blob格式后下载 ,file文件下载
使用FileReader 对象转换 (该对象用于读取单个文件),接收File对象或Blob对象 base64下载针对不同类型文件,FileReader使用不同的方法读取 readAsBinarySt ...
vue-axios下载文件流blob，ie下载报传递给系统调用的数据区域太小.ie文件流下载报错；文件下载失败将blob的错误信息转换成json格式
本次下载是后台文件流传输,前端下载,前端将拿到的下载id和名称downloadName传递给下载方法:如果是多个下载,可以采用数组for循环情景描述: 1.如果符合导出条件, 后端直接返回数据流,如 ...
前端接收bolb格式下载文件，前端下载blob格式的文件
最近遇到一个下载文件的需求,不是请求后端接口直接下载文件,而是后端返回blob格式的文件,前端自行下载文件下面的具体的操作代码 1.修改request请求(请求是封装好的axios方法),增加响应参 ...
如何把后端返还的blob格式的文件进行本地下载？
代码的请求思路:请求后端接口,返还blob文件. qs.stringify 是把一个参数对象格式化为一个字符串. axios({method: "get",url: `/api/l ...
关于视频的链接src带有blob:http的视频如何下载的问题
目录前言解决方案前言在爬虫的时候,想要爬一些视频下来参考学习,会发现有一些网站提供的视频链接打不开,或是是404, 比如某网站选中视频元素,发现视频链接是这样 <video id=&qu ...
img图片的预览和下载（iframe基本使用），图片转file格式，file文件转base64格式，base64的编码和解码
目录一.根据后端接口返回的URL下载和预览图片 1.调用下载图片函数实现下载图片 2.弹出另一个页面,实现预览图片. 3.不弹出另一个页面,实现下载/预览图片(iframe方式) 4.动态创建ifr ...
后端输出流文件时，浏览器不保存文件，不弹下载框
实践得知:通过ajax请求后端时,浏览器不会保存文件.因为ajax不支持返回二进制流. 我用的是axios也不行解决方法: //导出xxx(){console.log(this.data2)Vue. ...
js如何在浏览器中运行php文件下载,JavaScript_用JS在浏览器中创建下载文件，但受限于浏览器，很多情况下 - phpStudy...
用JS在浏览器中创建下载文件但受限于浏览器,很多情况下我们都只能给出个链接,让用户点击打开->另存为.如下面这个链接: file.js 用户点击这个链接的时候,浏览器会打开并显示链接指向的文件 ...
docx文件上传java_java上传文件通过mybatis存储到数据库的blob格式中.docx
java上传文件通过mybatis存储到数据库的blob格式中.docx 还剩 4页未读, 继续阅读下载文档到电脑,马上远离加班熬夜! 亲,喜欢就下载吧,价低环保! 内容要点: 上传文件通过 myb ...

链接文件转blob格式下载（浏览器）

需注意的内容

链接文件转blob格式下载（浏览器）相关推荐

最新文章

热门文章