前端下载文件，下载图片和pdf新标签中打开,下载二进制流，canvas图片跨域

对于静态服务的文件一般可以通过a标签+download属性来下载, 但是如果文件是图片，pdf,html等浏览器支持解析的，而且是当前文件是跨域的，那么浏览器就会在新标签中打开。

<a download="" href='***'>下载</a>

• 文件不跨域 => 下载
• 文件跨域 + 浏览器不支持解析 => 下载
• 文件跨域 + 浏览器可以解析 => 新标签中打开

如果是后端返回的二进制流，可以通过ObjectURL进行下载(同时可以解决跨域img,pdf等新标签打开的问题和canvas图片跨域问题)

function downloadFile(url){
            const xhr = new XMLHttpRequest();
            xhr.open('GET',url)
            xhr.responseType = 'blob'
            xhr.send()
            xhr.onload = function(){
                const res = xhr.response
                const fileUrl = URL.createObjectURL(res)
                const eleA = document.createElement('a')
                eleA.setAttribute('href',fileUrl)
                eleA.setAttribute('download','')
                eleA.click()
                URL.revokeObjectURL(fileUrl)
                // window.open(fileUrl) // 同样可新标签中打开进行预览
                // img.src=fileUrl  // 设置为img标签src
            }
        }

为什么Object URL可以解决canvas跨域问题(也可以通过crossOrgin解决)，因为Object URL生成的是非跨域的URL.

<img src="blob:http://127.0.0.1:8887/db072d13-60d1-40b7-887b-6dd7ea8e883a" alt="">

这篇文章内容比较少也比较基础，因为连续有人问到，简单记录一下