以下的下载是,拿到了后端给的下载图片的接口地址url
> 方法1:将文本或者JS字符串通过 Blob 转换成二进制下载
优点:可以下载,也可以保存名称。
//文件流参数和图片名称
function downloadTxt(str, filename){
let a = document.createElement('a')
a.download = filename
a.style.display = 'none'
let blob = new Blob([str])
a.href = URL.createObjectURL(blob)
document.body.appendChild(a)
a.dispatchEvent(new MouseEvent('click'))
document.body.removeChild(a)
}
> 方法2:原生的下载方法
优点:可以下载,也可以保存名称。 推荐!!!!
downLoadFileImg (fileUrl, fileName) {
// fileUrl -- 后端下载地址 可能是拼接了文件id, fileName -- 下载文件名称
// 可以下载 没名称
// location.href = fileUrl
// 可以下载 但是名称设置无效
// let a = document.createElement('a')
// a.download = fileName
// a.href = fileUrl
// a.dispatchEvent(new MouseEvent('click'))
// 名称设置有效但是下载文件打不开
// // let a = document.createElement('a')
// // a.download = fileName //图片名称
// // a.style.display = 'none'
// // let blob = new Blob([fileUrl]) //图片地址
// // a.href = URL.createObjectURL(blob)
// // document.body.appendChild(a)
// // a.dispatchEvent(new MouseEvent('click'))
// // document.body.removeChild(a)
// 会打开新的页面下载 但是没名称
// const newWindow = window.open()
// newWindow.document.write(
// '<iframe width="100%" height="100%" src="' + fileUrl +
// '" frameborder="0" allowfullscreen></iframe>'
// )
// newWindow.document.title = fileName
// 可下载,名称也有效 -- 推荐
const x = new window.XMLHttpRequest()
x.open('GET', fileUrl, true)
x.responseType = 'blob'
x.onload = () => {
const url = window.URL.createObjectURL(x.response)
const a = document.createElement('a')
a.href = url
a.download = fileName
a.click()
}
x.send()
},
> 方法3:a标签下载
a标签html5版本新增了download属性,用来告诉浏览器下载该url,而不是导航到它,可以带属性值,用来作为保存文件时的文件名,尽管说有同源限制,但是我实际测试时非同源的也是可以下载的。
对于没有设置Content-Disposition响应头或者设置为inline的图片来说,因为图片对于浏览器来说是属于能打开的文件,所以并不会触发下载,而是直接打开,浏览器不能预览的文件无论有没有Content-Disposition头都会触发保存:
其中:href是下载地址,download是下载名称;
href 的下载地址 和 当前网站地址 必须是 同源的 ,否则download名称不生效。
<a href="../../static/demo.jpg" download="demo.jpg" target="_blank">demo.jpg</a>
<!-- 直接打开 -->
<a href="/test.jpg" download="test.jpg" target="_blank">jpg静态资源</a>
<!-- 触发保存 -->
<a href="/test.zip" download="test.pdf" target="_blank">zip静态资源</a>
<!-- 触发保存 -->
<a href="https://www.7-zip.org/a/7z1900-x64.exe" download="test.zip" target="_blank">三方exe静态资源</a>
<!-- 直接打开 -->
<a href="/createQrCode?text=http://lxqnsys.com/" download target="_blank">二维码流</a>
<!-- 直接打开 -->
<a href="/getFileStream?name=test.jpg" download target="_blank">jpg流</a>
<!-- 触发保存 -->
<a href="/getFileStream?name=test.zip" download target="_blank">zip流</a>
<!-- 触发保存 -->
<a href="/getAttachmentFileStream?name=test.jpg" download target="_blank">附件jpg流</a>
<!-- 触发保存 -->
<a href="/getAttachmentFileStream?name=test.zip" download target="_blank">附件zip流</a>
方法4:a标签方式类似的还可以使用location.href
这2、3种方式的缺点也很明显,一是不支持post等其他方式的请求,二是需要后端支持
location.href = '/test.jpg'
还有其他的下载方式可以参考原文链接!