关于Web浏览器的限制,MSIE 6/7不支持数据URL方案… 更多信息 wikipedia

每个浏览器的长度限制是不同的-我相信IE8允许高达32kb,Opera是4kb,但不能真正告诉其他浏览器…

简短回答:数据URI限制不同。

答案很多。正如5年前被问到的那样,由于过时,大多数问题现在都是错误的,然而这个问题在谷歌搜索结果中处于“数据URI限制”的顶端。数据URI现在 widely supported IE 7/8不再是一个相关的浏览器。下面有很多参考资料,因为今天的答案是细微的。

数据URI限制

数据URI规范没有定义大小限制,但表示应用程序可能会强制使用自己的大小限制。

• 铬- 2MB 对于当前文档。否则,限制是任意blob的内存存储限制:如果x64而不是chromeos或android,则为2Gb;否则, total_physical_memory / 5 ( source )
• 火狐 unlimited
• ie_9&edge- 4GB
• Safari&Mobile Safari-?

选择

一种技术 higher limit (500MiB in Chrome) 对于您的用例来说,这可能是一个备选方案,即blob urls通过 URL.createObjectURL() 使用 URL API 通过 File API . 示例见 Using URL.createObjectURL() .

中提到的其他几个备选方案 How to write a file / give it to the user 是: FileSaver.js , StreamSaver.js 和 JSZip .

您可以使用Modernizer检测对 data URIs over 32kb .

相关问题

这些答案和这个问题差不多,但我提到它们是为了节省你阅读每个问题的时间。

• getting max Data-Uri size in Javascript
• “Aw, Snap” when data uri is too large
• What is the size limit of a Base64 DataURL image?
• What is the maximum length of a URL in different browsers? 这个问题是关于URL的,而不是关于数据URI的,但是有关于数据URI的相关答案和注释。
• Is it possible to programmatically detect size limit for data url?

我刚刚做了一个快速检查,嵌入了8个不同的jpeg图像,范围从3844到 2233076字节 在尺寸上。

以下所有浏览器在我的 视窗7 (64位)系统:

• 铬14.0.816.0
• 火狐11
• 谷歌Chrome 18.0.1025.142
• Internet Explorer 9.0.5(64位)
• 歌剧11.62
• Safari 5.1.5

从 http://www.ietf.org/rfc/rfc2397.txt :

“data:”url方案只有用 对于短值。注意一些 使用URL的应用程序可能会强制 长度限制;例如,URL 内嵌 <A> HTML中的锚 长度限制由 HTML的SGML声明[rfc1866]。 Litlen(1024)限制了 可以出现在 单属性值文本 ATTSPRE(2100)限制所有 所有属性值的长度 标签中出现的规格, Taglen(2100)限制了 标签的总长度。

我读到Safari的数据URI限制为128K:

http://blog.clawpaws.net/post/2007/07/16/Storing-iPhone-apps-locally-with-data-URLs#c1989348

铬为2米:

http://code.google.com/p/chromium/issues/detail?id=44820#c1

它真的是 data URI scheme “。

根据维基百科的页面,IE7缺乏支持,IE8 betas将其限制在32kb的数据。

2017个答案是: 将data:转换为blob,函数为:dataurltoblob

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

然后创建blob url

var temp_url = window.URL.createObjectURL(blob);

如果需要,可以在新窗口中使用。

var redirectWindow = window.open('');
redirectWindow.document.write('<iframe src="' + temp_url + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>')      

与Chrome/Firefox 2017中的大文件一起使用

仅仅是一个提示,我就可以通过一个JavaScriptAjax调用,使用Firefox3.5中的数据URL加载130k图像。它截断了IE8中的图像,但整个事件都出现在FF中。

似乎火狐3.6的限制是600kb。

我试过Waza123的密码,但是 charCodeAt 方法未正确转换所有字符。这是我在浏览器中创建大量下载的解决方案。(我把它用于JSON数据)

function exportToFile(jsonData, fileName) {
    const u8arr = new TextEncoder('utf-8').encode(JSON.stringify(jsonData, null, 2));
    const url = window.URL.createObjectURL(new Blob([u8arr], { type: 'application/json' }));
    const element = document.createElement('a');
    element.setAttribute('href', url);
    element.setAttribute('download', fileName);
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
}