0%

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

  • 问题

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

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

  • 解决方法:

    使用XMLHttpRequest来下载文件内容:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    /**
    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();
    }