在 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属性。目标属性也设置为“_blank”，以便生成的 PDF 在新选项卡中打开。

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

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

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

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

在运行此测试时，我刚刚注意到在隐身窗口中问题似乎不存在，并且新选项卡正确打开......

Answer 1

这似乎是 Chrome 中的一个临时错误。截至撰写本文时，该代码适用于当前的 Canary（测试版） Chrome 版本（v.59.0.3044.1）。

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

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