a标签跨域既想显示文件名又想交给浏览器下载进度？

Question

项目里有个下载文件的功能，但跨域，用的是处理XHR方式给a标签加了文件名，可以显示文件名，但这种就没有直接交给浏览器从而可以显示下载进度，如果直接交给浏览器因为跨域所以a标签的download无效了，头疼，有没有大佬请教一下，难道只能自己写进度条了吗？

Answer 1

1. 如果支持 xhr 下载，就在网页里下载，这样就可以显示进度条
2. 然后用 URL.createObjectURL() 生成内存链接
3. 接着修改 <a> 里的链接，指向内存位置
4. 如此 download 也能生效

Answer 2

看是什么文件。
如果是小文件，不超过20MB这种，可以直接用异步请求的方式，把文件内容读取下来，然后转化为本地资源，dataURL或者blobURL，直接丢进a标签的href即可。参考https://zhuanlan.zhihu.com/p/397587262
如果是大文件，几十或者几百MB以上，不建议本地资源转化，可以让后端做一个服务转发或者后端提供下载接口。

Answer 3

用xhr执行head请求获取到文件名, 然后显示到a标签上, 即可.

Answer 4

download 无效？是不是因为服务端没加下载头，加一下就可以。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。