javascript - 在 Chrome 中使用目标 "blob:"将 anchor href 设置为 "_blank"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 ”)分配给 anchor 的 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 header ，然后将其用作 href 的来源:

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