WEB前端图片直接下载，防止浏览器预览

• 问题

  前端使用<a href="xxx"></a>标签形式下载文件时，如果文件是图片、TXT文档、PDF等浏览器可以直接预览的内容时，浏览器会直接预览展示，而非下载文件。

  window.open()、<a>标签加download属性等方法均无效

• 解决方法：

  使用XMLHttpRequest来下载文件内容：

  /**
   uri: 资源链接
   filename: 下载到本地时使用的文件名
   */
  function downloadFile(uri, fileName) {
    var request = new XMLHttpRequest();
    request.responseType = "blob"; //定义响应类型
    request.open("GET", uri);
    request.onload = function () {
      var url = window.URL.createObjectURL(this.response);
      var a = document.createElement("a");
      document.body.appendChild(a);
      a.href = url;
      a.download = fileName
      a.click();
    }
    request.send();
  }