15.1g php 文件限制,在Chrome浏览器中下载大文件（最大15 MB）时遇到的问题

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

此问题是由于chrome在锚点()download属性中设置的大小限制。我不太确定他们为什么这么做，但解决方案非常简单。

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

// edited from https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Polyfill

function dataURIToBlob(dataURI, callback) {

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;

Start the loading of this 45Mb video

blob

dataURI

而一个jsfiddle version为FF，因为他们不允许从堆栈段的download属性...