前端下载图片、pdf、excel、world文件；前端下载图片和pdf文件；前端a标签下载图片和pdf文件；下载文件名称不生效原因。

参考文章1
参考文章2

以下的下载是，拿到了后端给的下载图片的接口地址url

> 方法1：将文本或者JS字符串通过 Blob 转换成二进制下载

优点：可以下载，也可以保存名称。

//文件流参数和图片名称
function downloadTxt(str, filename){let a = document.createElement('a')a.download = filenamea.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 = urla.download = fileNamea.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>