如何使用 javascript 在浏览器中显示 PDF 流

Question

我正在使用 jquery 的 ajax 方法访问现有的 WCF Web 服务（它以字节流的形式返回 PDF）。

当对服务的调用完成时，我最终得到一个包含 PDF 的 javascript 变量（该变量包含二进制数据，从“%PDF-1.4...”开始）。

我想在新的浏览器窗口中显示这个 PDF，但我很难做到这一点。

到目前为止，我的研究表明，我可能能够使用 data: uri 实现我想要的功能，因此在 ajax 调用完成时调用的代码如下：

function GotPDF(data)
{
    // Here, data contains "%PDF-1.4 ..." etc.
    var datauri = 'data:application/pdf;base64,' + Base64.encode(data);
    var win = window.open("", "Your PDF", "width=1024,height=768,resizable=yes,scrollbars=yes,toolbar=no,location=no,directories=no,status=no,menubar=no,copyhistory=no");
    win.document.location.href = datauri;
}

这会导致一个新的浏览器窗口打开，但内容是空白的。

有趣的是，如果我使用文件 uri 将浏览器 (IE9) 指向本地磁盘上的现有文件，例如 file://c:/tmp/example.pdf，那么我得到相同的结果，即空白窗户。

有什么办法可以显示这个PDF数据吗？

Answer 1

您编写的代码不显示任何内容，只需打开一个空白窗口（ location.href是浏览历史的哈希值，而不是页面内容）。

要显示 PDF，您至少有以下选项：

×在embed或object标签内嵌入 PDF 查看器。 它可能不像您想象的那么简单，请查看这篇文章以获取示例代码。 简而言之，它应该是这样的：

<object data="your_url_to_pdf" type="application/pdf">
    <embed src="your_url_to_pdf" type="application/pdf" />
</object>

这是基本代码，但如果您需要更高的跨浏览器兼容性，我建议遵循我在链接帖子中所说的内容。 请注意，现在<embed>完全没有用，您最好提供一个链接来下载文件。

×将文件下载到本地计算机（只需添加生成文件的 Web 服务方法的完整 URL，不要忘记在标题中添加正确的Content-Disposition ）。

×在新的浏览器窗口中打开文件。 当您指向要在新窗口中显示的在线 PDF 文件时，创建一个普通a标签。 将href更改为javascript:functionName并在该函数中生成您将用于调用 Web 服务方法的 URI。

无论您做什么，都不要忘记在您的响应中设置正确的 MIME 类型，而且您的方法不应返回字节流（即使已编码），而是对您的 Web 浏览器的有效响应。

Answer 2

如果您使用<embed>或<object>标签来显示来自服务器的流式 PDF 文件（或其他文件类型），如下所示：

<object data="SomeServlet?do=get_doc&id=6" type="application/pdf" width="800" height="400">

确保服务器发送正确的 http content-disposition值，在这种情况下将是inline 。