下载TXT文件在浏览器自动打开的问题

问题描述

点击链接下载文件时，如果是txt这种能够在浏览器直接打开的文件，会被直接打开，而不是下载。

原因

浏览器的机制，可以在链接上右击，然后选择 链接另存为 （chrome是这个名称，firefox是 从链接另存文件为，名字不同，功能一样），可以下载文件。

解决

一、传统解决方案

后台设置response的类型，示例如下：

response.addHeader("Content-Disposition","attachment;filename="文件名称.txt");           

二、html5解决方案

MDN对a的download属性的说明：

mdn对download的描述

具体做法是：在a标签上添加download属性，可以只写download,也可以写成download='文件名',示例如下：

< a href='./test.txt' download>下载
< a href='./test.txt' download='aaa.txt'>下载

遇到的坑：

现象：在本地测试，或者引用跨域的文件，即使加上download 属性依旧会自动打开txt！

原因：download 只有在同源文件上可以起作用，跨域 会导致download属性失效。

解决：

1. 使用同源文件，如果需要跨域，请参考传统解决方案；
2. 就是mdn里提到的，使用blob:URL和data:URL ,先发送一个 responseType= 'blob'的请求，然后由后台返回一个文件流，通过 URL.createObjectURL(new Blob([response.data]))的方式把返回结果在前端生成文件。