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

Question

我正在使用jquery的ajax方法访问现有的WCF Web服务(它将PDF作为字节流返回).

当对服务的调用完成时,我最终得到一个包含PDF的javascript变量(该变量包含二进制数据,从"%PDF-1.4 ..."开始).

我想在新的浏览器窗口中显示这个PDF,但是我很难实现这个目标.

到目前为止,我的研究表明,我可能能够使用数据实现我想要的东西: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数据吗？

Answer 1

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

要显示PDF,至少有以下选项:

×将PDF查看器嵌入embed或object标记内.它可能没有您想象的那么简单,请查看此帖子中的示例代码.简而言之,它应该是这样的:

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

这是基本代码,但如果您需要更高的跨浏览器兼容性,我建议您按照我在链接帖子中所说的内容进行操作.

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

×将文件打开到新的浏览器窗口中.当您指向要在新窗口中显示的在线PDF文件时,创建普通 a标记.更改hrefto javascript:functionName和in该函数会生成用于调用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.