[TOC]
### 1. 图片下载
~~~
commonDownload(url, name) {
axios.get(url, { responseType: 'blob' }).then(
res => {
let fileName = null
if (res.data.type === 'image/jpeg') {
fileName = `${name}.jpg`
}
if (res.status === 200) {
if (typeof window.chrome !== 'undefined') {
// Chrome
const link = document.createElement('a')
link.href = window.URL.createObjectURL(res.data)
link.download = fileName
link.click()
} else if (typeof window.navigator.msSaveBlob !== 'undefined') {
// IE
const blob = new Blob([res.data], { type: 'application/force-download' })
window.navigator.msSaveBlob(blob, fileName)
} else {
// Firefox
const file = new File([res.data], fileName, { type: 'application/force-download' })
window.open(URL.createObjectURL(file))
}
}
},
error => {
console.error('error', error)
}
)
}
~~~
### 2. 一般文件下载（含批量下载）
#### 2.1 `iframe`下载（不推荐，参照[`iframe`的优缺点](https://blog.csdn.net/baxiadsy_csdn/article/details/86245809)）
**当没有选择时再用该方案**
> 该方案支持批量下载，但每个下载都会新增一个`iframe` `dom`元素
~~~
commonDownloadFunction(url) {
const iframe = document.createElement('iframe')
iframe.src = url
iframe.style.display = 'none'
document.body.appendChild(iframe)
setTimeout(() => {
iframe.remove()
}, 1000 * 60)
}
~~~
#### 2.2 `widow.location.assign`下载
> 适合于单文件下载，批量下载可能会只下载一个文件
> 不支持文件名修改，文件名由后台提供
~~~
commonDownloadFunction(url) {
window.location.assign(url)
}
~~~
#### 2.3`a`标签下载（最佳选择）
方法1
> `download`属性指明当前下载文件的文件名
> 这种方法亦只适合于单文件下载，批量下载可能会只下载一个文件
~~~
commonDownload(url, name) {
const link = document.createElement('a')
link.href = url
link.download = name
link.click()
}
~~~
方法2
>[warning] 设置`responseType`为`blob`，请求得到一个二进制数据流，通过`a`标签直接放入本地
> 优点： 此方法支持批量下载，且可知当前下载文件是否存在
> 缺点： 需要给文件后缀名以告诉当前下载文件的保存类型（后缀名最好由后端提供）
eg: (本例中将后缀名写死了，实际场景中一般不会这样)
~~~
async commonDownload(url, name) {
try {
const res = await axios({
method: 'get',
url,
responseType: 'blob'
})
const link = document.createElement('a')
link.href = window.URL.createObjectURL(res.data)
link.download = `${name}.zip`
link.click()
} catch (error) {
console.error(`‘${name}’文件不存在或已删除！`)
}
}
~~~
