vue 文件下载
vue 文件下载1.一般我们下载文件基本会使用a标签下载<a href="xxxx.txt" download="文件名.txt">点击下载</a>但是有个问题,当浏览器可以打开这些文件的时候,a标签会进行一个跳转,比如路径是音频文件时,会跳转播放音频。而且a标签下载一般作为文件和页面在同一个域下使用,
·
文件下载
1.一般我们下载文件基本会使用a标签下载
<a href="xxxx.txt" download="文件名.txt">点击下载</a>
js方式
var aTag = document.createElement('a')
aTag.download = '你的文件名'
aTag.href = '你的文件地址'
aTag.click() // 执行一次a标签的点击事件
但是有个问题,当浏览器可以打开这些文件的时候,a标签会进行一个跳转,比如路径是音频文件时,会跳转播放音频。而且a标签下载一般作为文件和页面在同一个域下使用,也就是文件和页面在同一服务器,且地址为相对地址。
2.window.location.href和window.location
我们使用window.location.href有时是可以下载文件的,注意是“有时”,当文件是可以被浏览器读取跳转时,页面会跳转到相应页面读取文件内容和读取音频文件相似。
window.location.href在IE下需要兼容一般处理为
window.location.href = urls?name=xxx
部分火狐版本不支持window.location.href
所以兼容火狐和IE写成window.location= urls?name=xxx
window.location.href = urls; // 本窗口打开下载
window.open(urls, '_blank'); // 新开窗口下载
3.使用API提供的Blob下载《会出现文件损坏,未解决》
let fileName = xxx.mp3 // 文件地址
let downName = (new Date()).getTime()+".mp3" // 文件下载名称
const blob = new Blob([fileName])
if (window.navigator.msSaveOrOpenBlob) {
// 兼容IE10
navigator.msSaveBlob(blob, downName)
} else {
// chrome/firefox
let aTag = document.createElement('a')
aTag.download = downName
aTag.href = URL.createObjectURL(blob)
aTag.click()
URL.revokeObjectURL(aTag.href)
}
4.使用后台接口 用1和2的两种方式下载
更多推荐
已为社区贡献1条内容
所有评论(0)