所以我一直在四处看看。显然,网上有关于这些“下载网络故障”问题的公平问题。我觉得我们的问题有点独特,因为我们有一个文件。一个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+............
你可以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');
然后你的文件将开始下载。