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

How to display a PDF stream in a browser using javascript

本文关键字：显示 PDF 浏览器 何使用 javascript      更新时间：2023-09-26

我正在使用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;
}

这将打开一个新的浏览器窗口，但内容为空。

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

有什么方法可以显示这些PDF数据吗？

您编写的代码不会显示任何内容，只需打开一个空白窗口（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）。

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

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

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

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

确保服务器发送正确的http content-disposition值，在本例中为inline。

相关文章：