我在 Google Chrome 中遇到下载问题。
我正在使用 Ruby 2.2、Rails 4.2、AngularJS 1.2。
我们这里没有数据库。我们通过 API 获得的一切。我们尝试下载的文件大约 7 MB。它给我们“失败：网络错误”。虽然它在 Firefox 上运行良好。
我们从 API 获取 JSON 格式的二进制数据。我们正在解析它。进而：
send_data response_fields["attachment"], type: response_fields["mimeType"], disposition: 'attachment', filename: params[:filename]
当我们使用 AngularJS 时，我们在 AngularJS 控制器中捕获该值，然后将其转换为：
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 上出现更大尺寸的错误。
有什么建议么？
Thanks.
这几乎是这些问题的重复1 https://stackoverflow.com/questions/36918075/is-it-possible-to-programmatically-detect-size-limit-for-data-url and 2 https://stackoverflow.com/questions/36918075/is-it-possible-to-programmatically-detect-size-limit-for-data-url，但由于它们确实特别处理画布元素，因此我将在这里重写一个更全局的解决方案。
此问题是由于 chrome 在锚点中设置了尺寸限制（<a>) download属性。我不太清楚他们为什么这样做，但解决方案非常简单。
将您的 dataURI 转换为Blob https://developer.mozilla.org/en/docs/Web/API/Blob，然后创建一个对象URL https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL来自此 Blob，并将此 ObjectURL 作为锚点的下载属性传递。
// 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>
And a jsfiddle版本 https://jsfiddle.net/afzbe5zu/对于 FF，因为他们不允许download来自堆栈片段的属性...
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
