如何使用 URL.createObjectURL？

Posted 2023-03-14

【中文标题】如何使用 URL.createObjectURL？

【英文标题】：How to use URL.createObjectURL?

【发布时间】：2017-07-25 19:08:36

【问题描述】：

我的目标是创建一个表单，将 URL 提交到端点，该端点返回一个 PDF 的 base64 编码，该 PDF 显示在屏幕上没有window.open弹出窗口。

我想要的示例输出：https://s.natalian.org/2017-04-04/index.html

我很困惑如何使用生成的 objectURL 来显示 data:application/pdf;base64 响应。

https://s.natalian.org/2017-04-04/ObjectURL.html 我假设我没有正确解码 base64 响应？我不知道如何让它像上面想要的输出一样呈现为 PDF。

【问题讨论】：

blob ? - 那么，服务器返回什么？如果是 blob，则将 response.blob() 返回到链中的下一个 .then（您还没有）

服务器返回 base64

那么你需要什么？一个斑点？一个数据URI？别的东西？您没有任何代码可以“在屏幕上”显示结果，那么，您将如何做到这一点？

我可以使用 window.open，但我不想使用它，因为它会在 Chrome 中导致弹出窗口并且在 Safari 中根本不起作用。

另外两个选项是 <iframe> 或 <object>

【参考方案1】：

正如 Surma 在 cmets 中指出的那样：“如果你想使用 Blob()，你的服务器应该返回一个二进制 PDF”，而我的端点的问题是它返回了一个 base64 编码的响应。

我已经研究出如何使无服务器响应以二进制形式并在此处发布代码：https://github.com/calvintychan/serverless-html-pdf/pull/2

【参考方案2】：

您现在如何显示 PDF？看来你需要像https://github.com/mozilla/pdf.js 这样的东西来做到这一点而不依赖插件。如果您需要 URL，从 Blob 对象获取 blob URL 似乎是最直接的。

【讨论】：

也许这是一个小问题，但我看不到如何从 jsfiddle.net/kaihendry/h0u4vLn3/8 访问生成的 URL ... 'blob:fiddle.jshell.net/8d385365-4471-4c92-af08-59dff4454142' 不起作用。

你应该可以把它放在<a> 或类似的地方，然后点击它。