在 Chrome 中使用“_blank”目标将锚点 href 设置为“blob:”URL 的问题

Question

我正在开发一个网站，允许用户下载页面的 PDF 版本。当前的解决方案是在服务器上将生成的 HTML 呈现为 PDF，从而返回 Base64 编码的 PDF。从此数据创建一个 Blob，后跟一个 ObjectURL，如下所示：-

const blob = new Blob([B64A.decode(pdfdata)], {type: 'application/pdf'});
dataURL = (window.URL || window.webkitURL).createObjectURL(blob);

然后将 dataURL（格式为“blob:http://www.example.com/abcd1234-abcd-abcd-abcd-abcd1234efa”）分配给锚点的 href 属性标签。 target 属性也设置为“_blank”，以便生成的 PDF 在新选项卡中打开。

直到大约一周前，这一切都很好。在 Firefox 中，一切仍然有效，但在 Chrome 中存在问题。单击链接时，选项卡会快速打开，然后立即关闭。删除 target 属性会使一切正常工作，尽管 PDF 已加载到当前选项卡中，这不是我想要的。控制台没有记录任何内容，所以我没有从那里得到任何线索。

有没有人知道为什么会发生这种情况？由于这才刚刚开始发生，我假设这是最新版本的 Chrome 的问题（我在 Linux 上运行 57.0.2987.98（64 位），尽管一位同事在 Windows 10 上的 Chrome 也有同样的问题）。

编辑： 我刚刚创建了一个 CodePen 示例来演示这一点：https://codepen.io/anon/pen/OpOGbE

点击按钮，应该会生成两个链接。第一个应该在同一页面中正常打开。第二个应该在新标签中打开，但不在 Chrome 中（对我来说，它显示的行为与上面提到的相同）。

在运行此测试时，我只是注意到在隐身窗口中问题似乎不存在，并且新标签页正确打开...

Answer 1

这似乎是 Chrome 中的一个临时错误。撰写本文时的代码 works with current Canary (beta) 版本的 Chrome (v.59.0.3044.1)。

作为临时解决方法，您可以尝试使用原始 Base-64 数据并在其前面添加 data-uri 标头，然后将其用作 href 的源：

const dataURL = "data:application/pdf;base64," + pdfdata;