fetch下载的文件内容却是json字符串

431 阅读1分钟

记录一下:有一个下载文件的需求,后端有数据时返回文件流,没有数据时返回json,但是前端只处理了文件流,导致返回json时下载的文件显示如下错误信息。

image.png

现在就是这种情况要求前端在文件下载之前抛出错误提示,返回数据流时就正常下载。

fetch(url,xxx)
.then(res => {
    // 返回json时也被读取为blob
    return res.blob()
})
.then(async blob => {
    try {
        // Blob.text()返回一个promise且包含blob所有内容的string
        const jsonString = await blob.text()
        // blob 内容如果是json就提示错误出来 否则下载
        const json = JSON.parse(jsonString)
        message.error(json.message)
    } catch (err) {
        // 创建隐藏的可下载链接
        const a = document.createElement('a');
        const url = URL.createObjectURL(blob);
        a.style.display = 'none';
        a.href = url;
        // 保存下来的文件名
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        // 移除元素
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
   }
})