a标签download属性实现下载
缺点:只能下载同一个ip,端口下的文件,不能跨域(不论被下载文件的后端允不允许跨域,都不行)
<a download href="#"></a>
后端实现,nodeJs的expressJs框架为例
访问该地址就会打开系统文件夹,提示下载,不会显示要下载的内容
//后端
const path = require('path')
app.get('/', (req, res, next) => {
res.download(path.join(__dirname, './a.jpg'))
})
前端
<a href="localhost:3000/">点我下载</a>
Blob实现下载
可以跨域(前提是允许跨域,若被下载文件的后端做了特殊处理,或不许跨域,这种方法仍然不能下载)
function (url) {
const xhr = new XMLHttpRequest()
xhr.open('GET', url)
//将文件以二进制对象(blob)形式返回
xhr.responseType = 'blob'
xhr.send()
xhr.onload = function() {
//文件的二进制对象
const blobFile = xhr.response
//通过URL.createObjectURL()就可以把文件转换成本域名(同ip,端口)下的路径
let blobUrl = URL.createObjectURL(blobFile)
console.log(blobUrl);
//现在在同ip,端口下了,不跨域,就可以用原始的a标签的download了
let eleA = document.createElement('a')
eleA.setAttribute('href', blobUrl)
eleA.setAttribute('download', '')
//这就生成一个标签,可以append到html*点击下载。也可以直接帮人点击
//eleA.click()
}
}
除了图片,其他类型文件也可以