在Chrome浏览器中下载大文件(最大15 MB)时出现问题 [英] Problems downloading big file(max 15 mb) on google chrome
问题描述
我在Google Chrome中遇到下载问题。
我使用的是Ruby 2.2,Rails 4.2,AngularJS 1.2。
I have a downloading problem in Google Chrome. I am using Ruby 2.2, Rails 4.2, AngularJS 1.2.
这里没有数据库。我们通过API获得的一切。我们正在尝试下载的文件大约是7 MB。它给了我们失败:网络错误。虽然它在Firefox上运行良好。
We dont have a database here. Everything we are getting through API. The file which we are trying to download is around 7 mb. It gives us "Failed: Network Error". Though it works fine on Firefox.
在API中,我们使用JSON获取二进制数据。我们正在解析它。然后:
From the API we are getting binary data in JSON. We are parsing it. And then:
send_data response_fields["attachment"], type: response_fields["mimeType"], disposition: 'attachment', filename: params[:filename]
当我们使用AngularJS时,我们正在捕获AngularJS Controller然后将其转换为:
As we are using AngularJS, we are catching that value in AngularJS Controller and then converting it as:
var str = data;
var uri = "data:" + mimeType + ";base64," + str;
var downloadLink = document.createElement("a");
downloadLink.href = uri;
downloadLink.download = filename;
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
这适用于Firefox&即使Chrome浏览器的文件较小。不知道为什么它在Chrome上给出更大尺寸的错误。
This works in Firefox & even Chrome for smaller file size. Not sure why it is giving error for bigger size on Chrome.
有什么建议吗?
p>
推荐答案
这些问题几乎是重复的 1 和 2 ,但由于它们特别处理canvas元素,所以我会在这里重写更全面的解决方案。
This is an almost duplicate of these questions 1 and 2, but since they do deal particularly with the canvas element, I'll rewrite a more global solution here.
这个问题是由于chrome在锚点(< a>
) download
属性。我不太确定他们为什么这么做,但解决方案非常简单。
This problem is due to a size limit chrome has set in the anchor (<a>
) download
attribute. I'm not quite sure why they did it, but the solution is pretty easy.
将您的dataURI转换为 Blob ,然后创建一个 ObjectURL < a>,并将此ObjectURL作为锚点的下载属性传递。
Convert your dataURI to a Blob, then create an ObjectURL from this Blob, and pass this ObjectURL as the anchor's download attribute.
// edited from https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Polyfill
function dataURIToBlob(dataURI) {
var binStr = atob(dataURI.split(',')[1]),
len = binStr.length,
arr = new Uint8Array(len),
mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
for (var i = 0; i < len; i++) {
arr[i] = binStr.charCodeAt(i);
}
return new Blob([arr], {
type: mimeString
});
}
var dataURI_DL = function() {
var dataURI = this.result;
var blob = dataURIToBlob(dataURI);
var url = URL.createObjectURL(blob);
var blobAnchor = document.getElementById('blob');
var dataURIAnchor = document.getElementById('dataURI');
blobAnchor.download = dataURIAnchor.download = 'yourFile.mp4';
blobAnchor.href = url;
dataURIAnchor.href = dataURI;
stat_.textContent = '';
blobAnchor.onclick = function() {
requestAnimationFrame(function() {
URL.revokeObjectURL(url);
})
};
};
// That may seem stupid, but for the sake of the example, we'll first convert a blob to a dataURI...
var start = function() {
stat_.textContent = 'Please wait while loading...';
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function() {
status.textContent = 'converting';
var fr = new FileReader();
fr.onload = dataURI_DL;
fr.readAsDataURL(this.response);
};
xhr.open('GET', 'https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4?dl=0');
xhr.send();
confirm_btn.parentNode.removeChild(confirm_btn);
};
confirm_btn.onclick = start;
<button id="confirm_btn">Start the loading of this 45Mb video</button>
<span id="stat_"></span>
<br>
<a id="blob">blob</a>
<a id="dataURI">dataURI</a>
以及FF的 jsfiddle版本, t允许stack-snippets中的下载
属性...
And a jsfiddle version for FF, since they don't allow the download
attribute from stack-snippets...
这篇关于在Chrome浏览器中下载大文件(最大15 MB)时出现问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!