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

问题描述

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

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

当对服务的调用完成时，我最终得到一个包含 PDF 的 javascript 变量(该变量包含二进制数据，从%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.

到目前为止，我的研究表明，我可能能够使用 data: uri 实现我想要的功能，因此在 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.

有趣的是，如果我使用 file:uri 将浏览器 (IE9) 指向本地磁盘上的现有文件，例如 file://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?

推荐答案

你写的代码不显示任何东西，只是打开一个空白窗口(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 查看器嵌入 object 标签内.它可能不像您想象的那么简单，请查看这篇文章以获取示例代码.简而言之，它应该是这样的:

× Embed the PDF viewer inside an 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">
    <div>No PDF viewer available</div>
</object>

这是基本代码，但如果您需要更高的跨浏览器兼容性，我建议遵循我在链接帖子中所说的内容(它还包含一些关于您可能如何尝试检测对PDF 查看器).

That's basic code but I suggest to follow what I say in the linked post if you need higher cross-browser compatibility (it also contains a few examples about how you might try to detect support for a PDF viewer).

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

× 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).

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

× 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 类型，而且您的方法不应返回字节流(即使已编码)，而是为您的 Web 浏览器返回有效响应.

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屋！