如何使用 AJAX 将 pdf 带入 div？答案

【问题标题】：How can I use AJAX to bring bring pdfs into a div?如何使用 AJAX 将 pdf 带入 div？
【发布时间】：2010-05-07 04:50:38
【问题描述】：

好的，在我第一次跳入类似 AJAX 的行为中......

我想根据用户点击链接加载一个带有 pdf 的 div。如果用户点击第二个链接，则 div 应该被新的 pdf 覆盖。

所以我想用类似的东西来测试它：

<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，但它实际上并没有获取文件。我想我需要一些 AJAXy 知识才能在页面加载后强制执行该新请求。有人可以指点我开始探索的正确对象吗？

【问题讨论】：

路径是否正确？ my.pdf 是否存在于同一目录级别？
@Pekka：这只是一个假文件名。对于真正的我使用像“/topdir/middledir/bottomdir/my.pdf”这样的绝对路径。
"/topdir/middledir..." 是一个网络资源的绝对路径，当您直接在浏览器中打开它时，它就可以工作，对吧？（只是为了确保。）
@Pekka：很好的想法......总是仔细检查假设。是的，如果我将它粘贴到 URL 字段中，它会显示得很好。
嗯。如果您将object 标记作为纯HTML 插入，它会按预期工作吗？

标签： html ajax

【解决方案1】：

你可以尝试使用类似this...

【讨论】：

【解决方案2】：

我会尝试一些更简单的方法：使用 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>

【讨论】：

这对我不起作用，因为我们的公司网站可能不想依赖外部服务。但是，我投了赞成票，因为我认为它对很多人都有用。

【解决方案3】：

您尝试过使用 iframe 吗？整个“文档”不需要是PDF url吗？

【讨论】：

为什么？他正在使用<object>。不需要 iFrame 本身。
没有尝试过使用 iframe...不要认为它应该是必要的。（但话又说回来，我对此知之甚少。）