“下载网络失败” - Chrome在React Redux应用中的160 kb 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';

我们有一个调度函数，我们传入了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对象。

用法示例如下：

// FileSaver用法

          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');
          })

下载文件的另一种方法是，您发出一个从服务器发送文件的get请求。然后你可以简单地执行以下操作：window.open（'full server link'）;

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