reactjs - "Download Network Failed"- Chrome 在 React Redux 应用程序中处理 160kb tiff 文件失败

Question

所以我一直在四处寻找。显然，网络上有很多关于这些“下载网络失败”问题的报道。我觉得我们的问题有点独特，因为我们只有一个文件。一个 160kb 的 tiff 文件(实际上这是一个博客，我们也附加了一个 tiff 扩展名)。我只是在测试时偶然发现了这一点。这是我机器上的随机图像。我有更大和更小的文件，可以通过应用程序很好地处理。调试时，fiddler 中的响应看起来不错，就像任何其他好的响应一样。还通过我们的 React 应用程序跟踪响应，它看起来一直很好。所以问题发生在 Chrome 的某个地方，并且只针对这个文件。我们已经尝试了此处找到的所有标准内容。

https://productforums.google.com/forum/#!topic/chrome/7XBU6g6_Ktc

主要是摆弄扩展(禁用它们)、下载位置、重新安装等。但是我们发送一个较小的 jpg 文件进行转换(该应用程序是一个基本转换器)的想法让我感到困惑。有没有人见过这样的东西？

下面是我们在 redux 操作中处理文件的方式。

我们使用这些包

import dataURLtoBlob from 'dataurl-to-blob';
import FileSaver from 'file-saver';

我们有一个 dispatch 函数，我们传入它以在我们的 thunk(获取)中进行响应

export function saveFile(data, fileName) {
return (dispatch) => {
    var ie = navigator.userAgent.match(/MSIE\s([\d.]+)/),
        ie11 = navigator.userAgent.match(/Trident\/7.0/) && navigator.userAgent.match(/rv:11/),
        ieEDGE = navigator.userAgent.match(/Edge/g),
        ieVer = (ie ? ie[1] : (ie11 ? 11 : (ieEDGE ? 12 : -1)));

    if (ie && ieVer < 10) {
        console.log("No blobs on IE ver<10");
        return;
    }

    var mimeType = data.split(',')[0].split(':')[1].split(';')[0];
    var extension = '';
    if (mimeType.includes("zip")) {
        extension = "zip"
    }
    else {
        extension = mimeType.substr(mimeType.lastIndexOf('/') + 1);
    }

    var npmBlob = dataURLtoBlob(data);

    if (ieVer > -1) {
        FileSaver.saveAs(npmBlob, fileName + "." + extension);
    } else {
        var downloadLink = document.createElement("a");
        document.body.appendChild(downloadLink);
        downloadLink.style.display = "none";
        downloadLink.href = data;
        downloadLink.download = fileName;
        downloadLink.click();
    }
}
}

获取本身的相关部分

             }).then(response => {
            //debugger;
            var responseObj = JSON.parse(response);

            //handle multi-retrieve
            if (targetExtension.includes("/File/Retrieve")) {
                for (let array of responseObj) {
                    if (array.ReturnDocument) {
                        if (responseObj.length > 1) {
                            dispatch(saveFile(responseObj[0].ReturnDocument, "testFiles_download"));
                        } else {
                            dispatch(saveFile(responseObj[0].ReturnDocument, responseObj[0].ticketID));
                        }
                    }
                }
            }
            var returnObject = { returnResult: responseObj, loading: false };
            return callback(returnObject);

一切看起来都很好。 http 状态代码为 200，所有其他文件都在工作。据我们所知，我们发送的这个 jpg 文件确实没有什么特别之处。回来看起来很好。

这是发送的请求:

POST http://redacted/api/File/Convert HTTP/1.1
Host: redacted-dev
Connection: keep-alive
Content-Length: 168078
Origin: http://redacted-dev
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryhgZddb45UOHBhsgs
Accept: */*
Referer: http://redacted-dev/ui/Convert
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9

这是原始响应

HTTP/1.1 200 OK
Cache-Control: no-cache
Pragma: no-cache
Content-Type: application/json; charset=utf-8
Expires: -1
Server: Microsoft-IIS/8.5
X-AspNet-Version: 4.0.30319
Persistent-Auth: true
X-Powered-By: ASP.NET
Date: Tue, 02 Jan 2018 14:12:17 GMT
Content-Length: 3707173

这是我们取回 blob 时的样子(缩写):

 ReturnDocument=data:image/tiff;base64,SUkqAAg+............

Answer 1

您可以 file saver package下载 blob 对象。

使用示例如下:

//文件保护程序使用

          import FileSaver from 'file-saver';
          fetch('/records/download', {
            method: 'post',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(data)
          }).then(function(response) {
            return response.blob();
          }).then(function(blob) {
            FileSaver.saveAs(blob, 'fileName.zip');
          })

下载文件的另一种方法是发出从服务器发送文件的获取请求。 然后您可以简单地执行以下操作: window.open('完整服务器链接');

然后您的文件将开始下载。