Javascript 在新选项卡中打开Base64

我有一个Base64编码的文档，可以是PDF文件或图像。 我想在HTML5页面中创建一个按钮，在新选项卡中打开此base64（或新页面，这无关紧要）

我发现这段代码可以做到：

---

在chrome和Firefox上测试，只需将base64值添加到href属性works中（不需要onclick&onkeypress事件）。就这样,

---

您的MIME类型设置为“应用程序/八位字节流”，通常会被下载而不显示（取决于浏览器和系统设置）。如果您试图加载浏览器可显示的内容，那么您应该为您的内容使用更合适的MIME类型，以便它以内联方式显示，而不会被下载

请注意：和（虽然看起来像FireFox），数据URI不能在浏览器的顶层框架中打开（和），但可以在iFrame和img元素中打开

下面的解决方法已在上述浏览器的最新版本中测试和使用。这也可以用img标签重写以显示图像

下载

document.getElementById（'btnDownload'）。addEventListener（'click'，function（）{
var w=window.open（'about:blank'）；
setTimeout（function（）{//FireFox似乎需要setTimeout才能工作。
w、 document.body.appendChild（w.document.createElement（'iframe'））
.src='数据：应用程序/八位字节流；base64，swygsboywqgysbuawnrbgugzm9yigv2zj5ihrpbwugssboywqgysbuawnrbgusieknzcboyxzligvhdgvuihr3wnligfzig1hbnkgcglja2xlcy4='；
}, 0);
});

但是，如果您的目的只是下载内容（与问题中所述的目的相反，但通常适用于“应用程序/八位字节流”内容），这就足够了：

<a href='data:application/octet-stream;base64,SWYgSSBoYWQgYSBuaWNrbGUgZm9yIGV2ZXJ5IHRpbWUgSSBoYWQgYSBuaWNrbGUsIEknZCBoYXZlIGVhdGVuIHR3aWNlIGFzIG1hbnkgcGlja2xlcy4=' download>Download this</a>

---

我正在根据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);
});

谢谢您的回答。我已经在chrome和safari上测试了我在iPad上的功能，它可以在一周内正常工作。由于web浏览器的首选项，它似乎无法在我的计算机上运行。大概顺便说一句，如果它可以帮助你，我使用“数据：应用程序/八位字节流；base64”忽略了我的base64是什么类型的文件。这个解决方案不适用于IE。有没有其他解决方案可以在IE中使用？这在Chrome中不再有效，在Firefox中也将停止工作。查看我的答案了解更多详细信息。我刚刚在chrome中运行了该代码段，我在控制台中看到一个红色的buschrome显示错误：不允许将顶部框架导航到数据URL：请注意：在第一种情况下（将其放入新窗口的iframe或image标记），用户将无法下载图像。我的意思是：@Aaron，您能帮助我使iframe填充浏览器窗口吗？请在代码中添加解决方案的说明。

    <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>