在新选项卡中打开Base64
Open Base64 in new tab
我有一个Base64编码的文档,它可以是PDF文件或图像。我想在HTML5页面中创建一个按钮,在新选项卡(或新页面,这无关紧要)中打开这个base64
我发现这个代码可以做的把戏:
<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>
它运行良好。但是当我用替换http链接时
href="data:application/octet-stream;base64,/9j/4A.."
则下载该文件但不在浏览器中显示。
您的MIME类型设置为"application/octet stream",通常会下载而不显示(取决于浏览器和系统设置)。如果你试图加载浏览器可显示的内容,那么你应该为你的内容使用更合适的MIME类型,这样它就可以内联显示,而不会被下载。
请注意:从Chrome 60和即将推出的FireFox版本开始(尽管FireFox似乎仍然支持图像),数据URI无法在浏览器的顶级框架中打开(IE/Edge也从未支持过),但它们可以在iframe和img元素中打开。
下面的解决方法已在上述浏览器的最新版本中进行了测试和工作。这也可以用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);
});
然而,如果您的意图只是下载内容(与问题中所述的意图相反,但通常适用于"应用程序/八位位组流"内容),这就足够了:
<a href='data:application/octet-stream;base64,SWYgSSBoYWQgYSBuaWNrbGUgZm9yIGV2ZXJ5IHRpbWUgSSBoYWQgYSBuaWNrbGUsIEknZCBoYXZlIGVhdGVuIHR3aWNlIGFzIG1hbnkgcGlja2xlcy4=' download>Download this</a>
在chrome和Firefox上进行了测试,只需将base64值添加到href属性works中即可(无需onclick&onkeypress事件)。就像这样:
<html>
<body>
<a href="data:image/gif;base64,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">test</a>
</body>
</html>
我将根据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);
});
<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>
相关文章:
- 通过js在新选项卡中有条件地打开url
- 新选项卡被弹出窗口阻止程序阻止
- 在新选项卡中打开链接,但不使用_blank方法
- 单击按钮即可在浏览器的新选项卡中打开 Sapui5 详细信息页面
- 在同一选项卡中启动下载,而无需在Javascript中打开新选项卡或窗口
- Javascript事件;在新选项卡中打开”;
- jQuery-尝试附加每个要选择的新选项
- 使用Javascript从Drupal打开新选项卡
- 如何在新选项卡中而不是在新窗口中打开URL
- 如何禁用鼠标中键单击超链接以在新选项卡或新窗口中打开
- 如何在新选项卡中打开链接以及在当前选项卡中重定向
- 如何超链接在新选项卡中打开并携带一些变量的选择标记
- 在新选项卡中打开iframe源
- 如何防止iframe中的链接在新选项卡中打开
- 单击我网站中的链接时打开新选项卡,保持当前选项卡处于活动状态
- 打开除域之外在新选项卡中打开的所有外部链接
- 如何使用jQuery更改当前URL并在单击时打开新选项卡
- 强制 window.open() 在 chrome 中创建新选项卡
- 如何在火狐扩展的新选项卡中打开网址
- 在新选项卡中打开Base64