【背 景】 一般我们想下载.txt .html等等属于文本类型的文件，可以通过a标签的“download”属性来直接下载到本地。但是当遇到png等图片类型和MP4等视频类型的文件时，浏览器会默认打开一个新页面然后展示图片或视频类容，并不会直接下载到本地。如下：

<a href="http://wx1.sinaimg.cn/large/aabb125aly1fjotz5bfbsj20dw0dwjsv.jpg'' download='myPicture.jpg'>

【实 现】这里有两种实现支持所有类型文件下载的方法：

方法一： 后台给我们直接返回url时，我们可以采用window.open( rul ) 的形式下载，如下写法：

window.open("http://wx1.sinaimg.cn/large/aabb125aly1fjotz5bfbsj20dw0dwjsv.jpg'")

这种写法浏览器会打开新的标签页，然后再下载到本地。

方法二： 后台给我们的是文件下载接口时，就采用form表弟的提交功能，代码如下：

var id = '666';

try {

        const eleForm = document.createElement("form");//创建form

        eleForm.setAttribute("method", "get");

        eleForm.setAttribute(

          "action",

          "/api/file/download" + id

        );

        document.getElementsByTagName("body")[0].appendChild(eleForm);

        eleForm.submit();

        eleForm.remove();// 移除form

      } catch (e) {

        window.open("/api/file/download" + id);

      }

通过接口下载文件，可以实现在当前页面下载各种格式的文件！