JS-a标签下载文件

问题描述

昨天拿到一个需求,就是做成这种下载的模样

后台返回的下载链接长成这样

解决方法

就是一个最普通的方法,创建a标签 ,加上download属性,模拟标签点击就可以触发下载了
注意:这个是因为直接拿到了请求链接,get请求

 const SERVER_PATH = `${window.location.origin}/ai/aiServer/`;const alink = document.createElement('a');alink.style.display = 'none'alink.href = `${SERVER_PATH}${downloadUrl}`;alink.download = '';document.body.appendChild(alink)alink.click();URL.revokeObjectURL(alink.href) // 释放URL 对象document.body.removeChild(alink)

拓展另一种文件流下载

通过请求完成接收到的blob 然后再调用a链接下载
这是参考了这个同学的做法,使用的是fetch请求

requestMusicData(item,index){//请求并且传递音乐名称fetch('/music/file?name='+item.innerText,{method: 'get',responseType: 'blob'}).then(res => {     return res.blob();}).then(blob => {let bl = new Blob([blob], {type: "audio/m4a"});let fileName = Date.parse(new Date())+".m4a";var link = document.createElement('a');link.href = window.URL.createObjectURL(blob);link.download = fileName;link.click();window.URL.revokeObjectURL(link.href);})
}

JS-a标签下载文件相关推荐

JS a标签下载文件而不打开文件
// 下载文件 function downfile(obj) {var url = $(obj).attr("files");//url = "http://10.19. ...
a标签下载文件，js/jq创建a标签导出Excel文件
a标签下载文件,js/jq 创建a标签导出Excel文件 1.设置dom(html) <button type="button" class="layui-btn ...
js下载文件及前端使用a标签下载文件download属性失效问题
通常下载通过document.createElement创建虚拟a标签 function downloadFileUrl(val, url, fileName) {if (isVal) return ...
使用a标签下载文件，浏览器会直接打开解决方案
使用a标签下载文件,浏览器会直接打开解决方案背景一.HTML中的a标签实现点击下载二.即使使用a标签的download属性,chrome浏览器还是会打开三.解决方案解决方案一:使用ajax请 ...
Vue项目：js模拟点击a标签下载文件并重命名，URL文件地址下载方法、请求接口下载文件方法总结。
URL文件地址下载方法一.正常情况下,我们都如此下载文件并修改文件名,在a标签上面添加download属性 //文件下载downFile() {if ('download' in document. ...
a标签下载文件header中带上用于鉴权的token
加了统一鉴权以后如果把下载接口也拦截了且前端使用的是a标签可以用如下方法解决替换调请求url和请求方式 , 方式一和方式二任意注释一个就可以运行了方式1用的是原生的XmlHttpReque ...
A 标签下载文件 Header 中带上用于鉴权的 Token
加了统一鉴权以后,可能会把 A 标签下载的接口也给拦截了,但是 A 标签是无法带上 Token 的,本文将介绍如何让 A 标签支持像 Ajax 一样发送请求. 加了统一鉴权以后如果把下载接口也拦截了 ...
js 点击下载文件、图片
想直接看结论,看代码方法一!!!方法二和方法三不兼容,只是延伸下思路. 参考: https://blog.csdn.net/weixin_33694620/article/details/881705 ...
vue.js接收并下载文件流（blob对象）
在vue框架中,与传统的根据路径下载文件(document.getElementById("").src='')方式不同,有时候,我们会需要将上传的文件在后台直接进行处理再回传到前 ...
原生JS实现Ajax下载文件
/*** url 下载url* filename 下载文件名称*/ function download(url, filename) {var xhr = new XMLHttpRequest();x ...

JS-a标签下载文件

目录

问题描述

解决方法

拓展另一种文件流下载

JS-a标签下载文件相关推荐

最新文章

热门文章

JS-a标签下载文件

目录

问题描述

解决方法

拓展 另一种文件流下载

JS-a标签下载文件相关推荐

最新文章

热门文章

拓展另一种文件流下载