Question

我在Google Chrome中遇到了下载问题。我使用的是Ruby 2.2，Rails 4.2，AngularJS 1.2。

我们这里没有数据库。我们通过API获得的一切。我们试图下载的文件大约是7 MB。它给了我们＆＃34;失败：网络错误＆＃34;。虽然它在Firefox上运行良好。

我们从API获取JSON中的二进制数据。我们正在解析它。然后：

send_data response_fields["attachment"], type: response_fields["mimeType"], disposition: 'attachment', filename: params[:filename]

当我们使用AngularJS时，我们在AngularJS Controller中捕获该值，然后将其转换为：

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＆amp;甚至Chrome也可以缩小文件大小。不确定为什么它会在Chrome上为更大的尺寸提供错误。

有什么建议吗？

感谢。

Answer 1

这几乎与这些问题1和2重复，但由于它们确实特别处理了canvas元素，因此我将在此处重写更全面的解决方案。

此问题是由于在锚点（<a>）download属性中设置了大小限制。我不太确定他们为什么这么做，但解决方案很简单。

将您的dataURI转换为Blob，然后从此Blob创建ObjectURL，并将此ObjectURL作为主播的下载属性传递。

＆＃13;

// 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;

＆＃13;

<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>

＆＃13;

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

在谷歌浏览器上下载大文件（最大15 MB）的问题

1 个答案: