如何使用JavaScript来显示在浏览器中的PDF流 [英] How to display a PDF stream in a browser using javascript

问题描述

我访问现有的WCF Web服务使用jQuery的AJAX方法（它返回一个PDF作为字节流）。

I am accessing an existing WCF web service (which returns a PDF as a byte stream) using jquery's ajax methods.

当调用该服务完成后，我结束了包含PDF（该变量的二进制数据，从％PDF-1.4 ...）。

When the call to the service completes, I end up with a javascript variable containing a PDF (the variable has the binary data in, starting "%PDF-1.4...").

我想这显示在PDF一个新的浏览器窗口，但我有困难，实现这一目标。

I'd like to display this PDF in a new browser window, but I'm having difficulty achieving this.

我的研究，到目前为止表明，我也许能达到我想要的使用数据：URI，所以我的code，它就是所谓的当Ajax调用完成如下：

My research so far shows that I might be able to achieve what I want using a data: uri, so my code that's called when the ajax call completes is as follows:

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;
}

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

This causes a new browser window to open, but the contents are blank.

有趣的是，如果我用一个文件指向我的浏览器（IE9）在我的本地磁盘上的现有文件：URI，如文件：// C：/tmp/example.pdf，然后我得到了相同的结果，即一个空白窗口。

Interestingly, if I point my browser (IE9) at an existing file on my local disk by using a file: uri, such as file://c:/tmp/example.pdf, then I get the same result, i.e. a blank window.

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

Is there any way I can display this PDF data?

推荐答案

code你写不显示任何内容，只需打开一个空白窗口（ location.href 为浏览历史，而不是网页的内容）的哈希

Code you wrote does not display anything, simply open a blank window (location.href is an hash for browsing history, not the content of the page).

要显示你有一个PDF，至少以下选项：

To display a PDF you have, at least, following options:

＆倍; 嵌入嵌入或对象标记中的PDF阅读器。它可能不是那么简单，因为你可能会想象，看看到样品code这个帖子。总之，应该是这样的：

× Embed the PDF viewer inside an embed or object tag. It may not be as straightforward as you may imagine, take a look to this post for sample code. In short it should be something like this:

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

这是基本的code，但我建议要遵循我在联系后说，如果你需要更高的跨浏览器的兼容性。

That's basic code but I suggest to follow what I say in the linked post if you need higher cross-browser compatibility.

＆倍; 将文件下载到本地计算机（只需添加产生该文件的Web服务方法的完整URL，不要忘了添加适当的内容处置中的标头）。

× Download the file to local computer (simply add the full URL of your web service method that produces the file, do not forget to add the proper Content-Disposition in the header).

＆倍; 打开文件到一个新的浏览器窗口。创建的正常的当你指向要在新窗口中显示上线PDF文件中的标记。更改的href 到的javascript：functionName ，并在该函数产生的URI您将使用调用Web服务方法

× Open the file into a new browser window. Create a normal a tag as you point to a PDF file on-line that you want to display in a new window. Change the href to javascript:functionName and in that function produce the URI you'll use to call the web service method.

不管你会做，不要忘记设置你的回应正确的MIME类型而且你的方法应该不会返回一个字节流（即使连接codeD），但您的浏览器有效响应。

Whatever you'll do, do not forget to set the proper MIME type in your response moreover you method shouldn't return a byte stream (even if encoded) but a valid response for your web browser.

这篇关于如何使用JavaScript来显示在浏览器中的PDF流的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！