JS下载图片和文件，防止浏览器直接打开

1、可以直接通过访问文件的url进行下载
<a href="url" download="fileName">download</a>
或者
window.open(url, "_blank");

2、对于图片、pdf、txt等浏览器支持直接打开预览的文件，则不会进行下载
解决办法：模拟发送http请求，将文件链接转换成文件流，然后使用a标签download属性进行下载。
<button type="button" onclick="download()">点击下载</button>

function download() {
    let url = '文件地址'
    let name = '文件名称'
    // 发送http请求，将文件链接转换成文件流
    fileAjax(url, function(xhr) {
        downloadFile(xhr.response, name)
    }, {
        responseType: 'blob'
    })
}

function fileAjax(url, callback, options) {
    let xhr = new XMLHttpRequest()
    xhr.open('get', url, true)
    if (options.responseType) {
        xhr.responseType = options.responseType
    }
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            callback(xhr)
        }
    }
    xhr.send()
}

function downloadFile(content, filename) {
    window.URL = window.URL || window.webkitURL
    let a = document.createElement('a')
    let blob = new Blob([content])
// 通过二进制文件创建url
    let url = window.URL.createObjectURL(blob)
    a.href = url
    a.download = filename
    a.click()
// 销毁创建的url
    window.URL.revokeObjectURL(url)
}