JS 用a标签下载文档，如何获取下载失败的信息？

Question

文档下载方式是这样的：（点击后，生成一个a标签，然后download）

但是，这样的话，我在浏览器中的network没看到任何信息，所以，很纠结，这个怎么获取到呢？

我用这个方式去get，也和上图一样，文件下载成功，但是，没有什么请求的信息。

怎么样才能有返回结果呢？我想alert出文件下载错误的信息。

Answer 1

用 ajax请求 + Blob + a标签

下面这段代码往 https://cnodejs.org/api/v1/topics 发请求，并把返回的数据保存成json文件。
直接复制粘贴到控制台就能运行，网络状态切换到 Offline 可以测试下载失败的情况。
这里的 $.ajax 可以改成其他的网络请求， axios、fetch之类的都行，我这么写是为了方便测试。
如果你想存的文件不是json，是其他类型，可能要改一下 saveFile 函数。
然后我这个 saveFile 函数可能有兼容性问题，可以换成 https://github.com/eligrey/Fi... 这个库，具体用法看文档

let url = 'https://cnodejs.org/api/v1/topics'
let fileName = 'cnode首页主题'
getDataAndDownLoad(url, fileName)

function getDataAndDownLoad(url, fileName) {
    $.ajax({
        method: 'get',
        url: url,
        success: function (data) {
            console.log("下载成功");
            saveFile(data, fileName)
        },
        error: function () {
            console.log('下载失败')
        }
    })
}

function saveFile(data, fileName) {
    if (typeof data === 'object') {
        data = JSON.stringify(data)
    }
    let file = new Blob([data], {type: "application/json"});
    let url = window.URL || window.webkitURL;
    let fileURL = url.createObjectURL(file);
    let a = document.createElement("a");
    a.href = fileURL;
    a.download = fileName;
    a.target = "_self";
    a.click();
    url.revokeObjectURL(fileURL);
}

网络正常的时候下载成功，网络异常的时候下载失败：