Javascript 在新标签页中打开 Base64
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34339593/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Open Base64 in new tab
提问by user3249592
I have a Base64 encoded document which can be PDF file or image. I would like to create a button in HTML5 page that opens this base64 in a new tab (or new page it does not matter)
我有一个 Base64 编码的文档，它可以是 PDF 文件或图像。我想在 HTML5 页面中创建一个按钮，在新选项卡中打开此 base64（或新页面无关紧要）
I found this code can do the trick :
我发现此代码可以解决问题：
<a href="http://chriscoyier.net"
onclick="window.open(this.href); return false;"
onkeypress="window.open(this.href); return false;">
This link will open in new window/tab
</a>It works well. But when I replace the http link with
它运作良好。但是当我用
href="data:application/octet-stream;base64,/9j/4A.."
then the file is downloaded but not displayed in browser.
然后文件被下载但不在浏览器中显示。
How can I make it ?
我怎样才能做到？
Thanks
谢谢
采纳答案by Sébastien Ollivier
Tested on chrome and Firefox, just add the base64 value into the href attribute works (without onclick & onkeypress events). Just like that :
在 chrome 和 Firefox 上测试，只需将 base64 值添加到 href 属性即可（没有 onclick 和 onkeypress 事件）。就这样：
<html>
<body>
<a href="data:image/gif;base64,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">test</a>
</body>
</html>回答by Aaron J Spetner
Your MIME type is set to 'application/octet-stream', which will generally be downloaded and not displayed (depending on browser and system settings). If you are trying to load browser-displayable content, then you should use a more appropriate MIME type for your content so that it displays inline and does not get downloaded.
您的 MIME 类型设置为“application/octet-stream”，通常会下载而不显示（取决于浏览器和系统设置）。如果您正在尝试加载浏览器可显示的内容，那么您应该为您的内容使用更合适的 MIME 类型，以便它显示内联并且不会被下载。
Please note: As of Chrome 60and an upcoming version of FireFox(although it appears FireFox will still support images), data URIs cannot be opened in the top-level frame of the browser (and it was never supported in IE/Edge), but they can be opened in iframes and img elements.
请注意：从 Chrome 60和即将推出的 FireFox 版本开始（虽然看起来 FireFox仍然支持图像），数据 URI 无法在浏览器的顶级框架中打开（并且它从未在 IE/Edge 中支持），但它们可以在 iframes 和 img 元素中打开。
The workaround below is tested and working in the latest version of the above browsers. This could also be rewritten with an img tag to display an image.
下面的解决方法经过测试并在上述浏览器的最新版本中工作。这也可以用 img 标签重写以显示图像。
<button id='btnDownload'>Download</button>
document.getElementById('btnDownload').addEventListener('click', function(){
var w = window.open('about:blank');
setTimeout(function(){ //FireFox seems to require a setTimeout for this to work.
w.document.body.appendChild(w.document.createElement('iframe'))
.src = 'data:application/octet-stream;base64,SWYgSSBoYWQgYSBuaWNrbGUgZm9yIGV2ZXJ5IHRpbWUgSSBoYWQgYSBuaWNrbGUsIEknZCBoYXZlIGVhdGVuIHR3aWNlIGFzIG1hbnkgcGlja2xlcy4=';
}, 0);
});
If, however, your intention is to just download the content (contrary to the stated intent in the question, but applicable to 'application/octet-stream' content in general), this should suffice:
但是，如果您只想下载内容（与问题中所述的意图相反，但通常适用于“应用程序/八位字节流”内容），这应该就足够了：
<a href='data:application/octet-stream;base64,SWYgSSBoYWQgYSBuaWNrbGUgZm9yIGV2ZXJ5IHRpbWUgSSBoYWQgYSBuaWNrbGUsIEknZCBoYXZlIGVhdGVuIHR3aWNlIGFzIG1hbnkgcGlja2xlcy4=' download>Download this</a>
回答by richardwhitney
I am adding the answer to my questiion based on Aaron's answer:
我正在根据 Aaron 的回答为我的问题添加答案：
document.getElementById('btnDownload').addEventListener('click', function(){
var w = window.open('about:blank');
setTimeout(function(){ //FireFox seems to require a setTimeout for this to
work.
w.document.body.appendChild(w.document.createElement('iframe'))
.src = $this.attr('href');
w.document.getElementsByTagName("iframe")[0].style.width = '100%';
w.document.getElementsByTagName("iframe")[0].style.height = '100%';
}, 0);
});
回答by Liam Fisenne
<a href="aHR0cHM6Ly93d3cuc3dpdGNoLXRvcnJlbnRzLmNvbS9kb3dubG9hZC80MTMvU3VwZXIlMjBTbWFzaCUyMEJyb3MlMjBVbHRpbWF0ZS50b3JyZW50"
onclick="window.open(this.href); return false;"
onkeypress="window.open(this.href); return false;">
This link will open in new window/tab
</a>
