在谷歌浏览器上下载大文件(最大 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 控制器中捕获该值，然后将其转换为:

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.

有什么建议吗?

谢谢.

推荐答案

这几乎是这些问题的重复 1 和 2，但由于它们确实特别处理画布元素，我将在此处重写一个更全局的解决方案.

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 在锚点 () 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 来自此 Blob，并将此 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>

还有一个 jsfiddle version 用于 FF，因为它们不允许 download来自堆栈片段的属性...

And a jsfiddle version for FF, since they don't allow the downloadattribute from stack-snippets...

这篇关于在谷歌浏览器上下载大文件(最大 15 mb)时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！