如何使用AJAX将PDF文件加载到一个div中？

Question

好的，我的第一次尝试类似AJAX的行为...

我想在用户点击链接时加载一个基于PDF的div。如果用户点击第二个链接，则应使用新的pdf覆盖div。

所以我想测试类似以下的东西：

<script>
    function showPdf()
    {
        var pdfDiv = document.getElementById("pdfDiv");
        pdfDiv.innerHTML='<object type="application/pdf" data="my.pdf" width="500" height="650" ></object>';
    }
</script>
<div id="pdfDiv"></div>

然而，这样不起作用。

我猜我可能是在设置innerHTML，但它实际上并没有获取到文件。我想我需要一些AJAX知识来在页面加载后强制进行新请求。有人能指导我开始探索的正确对象吗？

- Beska

---

路径正确吗？my.pdf文件是否存在于同一目录级别？ - Pekka

@Pekka：那只是一个假的文件名。对于真正的文件名，我使用绝对路径，例如“/topdir/middledir/bottomdir/my.pdf”。 - Beska

“/topdir/middledir…” 是一个绝对路径，指向一个在浏览器中直接打开可以正常工作的网络资源，是吗？（只是为了确认一下。） - Pekka

@Pekka：思维敏捷，总是要双重检查假设。如果我只是将其粘贴到URL字段中，它就可以正常显示。 - Beska

嗯。如果您将object标签作为纯HTML插入，它是否按预期工作？ - Pekka

Answer 1

我建议您使用Google PDF Viewer服务，这样会更容易一些。您只需要创建一个iframe并更改其src即可：

<iframe src="http://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>

- Cristian

---

这对我来说行不通，因为我们的公司网站可能不想依赖外部服务。但是，我投了赞成票，因为我认为这对很多人会很有用。 - Beska

Answer 2

你可以尝试使用类似这样的东西...

- Gabe

Answer 3

你尝试使用 iframe 了吗？整个“文档”不需要是 PDF 的 URL 吗？

- Jared Updike

---

为什么？他正在使用一个<object>。没有必要使用iFrame。 - Pekka

还没有尝试使用iframe…我认为这不是必要的。（但是话说回来，我对此并不了解。） - Beska