1.直接在a标签内部使用属性指定下载链接和下载文件名字,例如
<a :download="item.fileName" :href="item.fileUrl">{{item ? item.fileName : "" }}</a>
利用href属性指定了下载地址,利用download属性指定下载的文件名字
2.动态创建a标签,例如
downloadFile(file) {
// console.log(file, "file...")
const link = document.createElement("a")
link.style.display = "none"
link.href = file.fileUrl
link.download = file.fileName
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
},
3.
/**
* 不支持ie
* @param {string} url 下载调用的url
* @param {string} fileName 下载调用的文件名称
*/
export function newDownLoadFileName(url, fileName) {
const x = new XMLHttpRequest()
x.open("GET", url, true)
x.responseType = "blob"
x.onload = function() {
//会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。
这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL
对象表示指定的 File 对象或 Blob 对象。
const url = window.URL.createObjectURL(x.response)
const a = document.createElement("a")
a.href = url
a.download = fileName
a.click()
}
x.send()
}
第三种方法不兼容IE,自己需要注意一下