1.单个下载
常见的有 txt、png、jpg、zip、tar 等各种文件格式,一部分浏览器是会直接打开链接显示内容的;而另外一部分,浏览器不识别响应头或者不能解析对应的格式,会当做文件直接下载下来了。如:
1.1 使用 location.href
// 适用于浏览器无法识别文件,如果是html、jpg、pdf等会直接解析展示,而不会下载
window.location.href = url
1.2 使用 window.open
// 适用于浏览器无法识别文件,如果是html、jpg、pdf等会直接解析展示,而不会下载
window.open("http://barretlee.com/test.rar")
// 多个文件下载时禁止打开新窗口
window.open(url, true)
1.3 使用 a 标签
// 适用于单文件下载或需要自定义文件名称,可下载各种类型,图片等会直接解析展示,不会下载
方式一:
<a href="http://barretlee.com/test.rar" download="test.rar" >下载</a>
方式二:
const download = (filename, url) => {
let a = document.createElement('a')
a.style = 'display: none' // 创建一个隐藏的a标签
a.download = filename
a.href = url
document.body.appendChild(a)
a.click() // 触发a标签的click事件
document.body.removeChild(a)
}
1.4使用Blob实现(可能有空白或乱码问题)
export function download (filename, url) {
let fileName = `${filename}.jpg`
let myBlob = new Blob([url], { type: 'image/jpeg' })
let link = document.createElement('a')
link.href = URL.createObjectURL(myBlob)
link.download = fileName
link.click()
link.remove()
URL.revokeObjectURL(link.href)
}
2.支持图片下载
export function download (filename, url) {
let image = new Image()
// 解决跨域 Canvas 污染问题
image.setAttribute('crossOrigin', 'anonymous')
image.onload = function () {
let canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
let context = canvas.getContext('2d')
context.drawImage(image, 0, 0, image.width, image.height)
let url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
let a = document.createElement('a') // 生成一个a元素
let event = new MouseEvent('click') // 创建一个单击事件
a.download = filename || '图片' // 设置图片名称
a.href = url // 将生成的URL设置为a.href属性
a.dispatchEvent(event) // 触发a的单击事件
}
image.src = url
}
3.支持各类型下载,批量下载
// 单个下载各类型文件
downloadFile (row) {
this.downloadBatch(row.filePath, (obj) => {
let a = document.createElement('a')
let url = URL.createObjectURL(obj)
a.href = url
a.download = row.fileName
a.click()
})
},
// 发送请求
downloadBatch (file, callback) {
let request = new XMLHttpRequest()
request.responseType = 'blob'
request.open('GET', file)
request.addEventListener('load', function () {
callback(request.response)
})
request.send()
},
// 批量下载
downloadAll () {
for (let i = 0; i < fileList.length; i++) {
// 调用单个下载方法
this.downloadFile(fileList[i])
}
}