如何使用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（例如file://c:/tmp/example.pdf）将我的浏览器（IE9）指向本地磁盘上的现有文件，则会得到相同的结果，即一个空白窗口。

有没有办法显示这个PDF数据？

- Dave W

Answer 1

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

要显示 PDF 文件，你至少有以下选项：

× 将 PDF 查看器嵌入到 object 标签中。这可能没有你想象的那么简单，请参考此帖子的示例代码。简而言之，它应该像这样：

<object data="your_url_to_pdf" type="application/pdf">
    <div>No PDF viewer available</div>
</object>

这是基本的代码，但如果您需要更高的跨浏览器兼容性，我建议按照我在链接帖子中提到的步骤进行操作（它还包含一些关于如何检测对PDF查看器的支持的示例）。

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

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

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

- Adriano Repetti

Answer 2

如果您正在使用<embed>或<object>标签从服务器上显示一个流式PDF文件（或其他文件类型），代码示例如下：

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

确保服务器发送适当的HTTP content-disposition 值，这种情况下应该为inline。

- Morey