在HTML中嵌入PDF的推荐方法是什么?
iFrame吗? 对象? 嵌入?
Adobe是怎么说的呢?
在我的例子中，PDF是动态生成的，因此不能在刷新之前将其上传到第三方解决方案。
当前回答
通过ImageMagick将其转换为PNG，并显示PNG(快速和肮脏)。
<?php
$dir = '/absolute/path/to/my/directory/';
$name = 'myPDF.pdf';
exec("/bin/convert $dir$name $dir$name.png");
print '<img src="$dir$name.png" />';
?>
如果你需要一个快速的解决方案，想要避免跨浏览器的PDF查看问题，如果PDF只有一页或两页，这是一个很好的选择。当然，您需要在web服务器上安装ImageMagick(这反过来需要Ghostscript)，这在共享托管环境中可能不可用。还有一个PHP插件(称为imagick)就像这样工作，但它有自己的特殊要求。
其他回答
您可以通过在查询字符串中传递一些选项来控制PDF在浏览器中的显示方式。我很高兴能这样工作，直到我意识到它不能在IE8中工作。：(
它适用于Chrome 9和Firefox 3.6，但在IE8中，它会显示“如果PDF文件无法显示，请在此处插入错误消息”的消息。
不过，我还没有测试上述任何浏览器的旧版本。但这是我的代码，希望能帮到大家。这将缩放设置为85%，删除滚动条，工具栏和导航窗格。如果我发现IE中也能运行的东西，我会更新我的帖子。
<object width="400" height="500" type="application/pdf" data="/my_pdf.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0">
<p>Insert your error message here, if the PDF cannot be displayed.</p>
</object>
您还可以使用谷歌PDF查看器来实现此目的。据我所知，这不是谷歌的官方功能(我错了吗?)，但它对我来说非常好和顺利。你需要先上传PDF文件，然后使用它的URL:
<iframe src="https://docs.google.com/gview?url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>
重要的是它不需要Flash播放器，而是使用JavaScript。
我发现嵌入pdf的最好方法是使用bootstrap，因为它不仅可以显示pdf，而且还可以填充可用空间，您可以根据自己的需要指定比例。下面是我用它做的一个例子:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <div class=" font - family -宋体"> <iframe class="embed- response -item" src="http://example.com/the.pdf" type="application/pdf" allowfullscreen></iframe> . < / div > < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < /脚本> < script src = " https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js " > < /脚本>
只使用iFrame的PDF文件。
我在React.js应用程序中有特定的需求，尝试了数百万个解决方案，但最终得到了一个iFrame:)祝你好运!
我们的问题是，由于法律原因，我们不允许在硬盘上临时存储PDF文件。此外，在浏览器中将PDF显示为预览时，不应该重新加载整个页面。
首先我们尝试了PDF.jS。它与Firefox和Chrome浏览器中的Base64一起工作。然而，对于我们的PDF来说，它慢得令人无法接受。IE/Edge完全不能工作。
因此，我们尝试在HTML对象标记中使用Base64字符串。这同样不适用于IE/Edge(可能与PDF.js的问题相同)。在Chrome/Firefox/Safari中也没有问题。 这就是我们选择混合解决方案的原因。边缘，我们使用IFrame和所有其他浏览器的对象标签。 IFrame解决方案当然也适用于Chrome和其他浏览器。我们没有在Chrome上使用这个解决方案的原因是，尽管PDF显示正确，但当你在预览中点击“下载”时，Chrome会立即向服务器发出新的请求。所需的隐藏字段pdfHelperTransferData(用于发送PDF生成所需的表单数据)不再设置，因为PDF显示在IFrame中。关于此功能/错误，请参阅Chrome在下载PDF时发送两个请求(并取消其中一个)。
现在IE9和IE10的问题仍然存在。对于这些问题，我们放弃了预览解决方案，只是通过单击预览按钮将文档作为下载发送给用户(而不是预览)。我们已经尝试了很多，但即使我们找到了解决方案，为这一小部分用户付出的额外努力也不值得。您可以在这里找到我们的下载解决方案:下载不带IFrame刷新的PDF。
我们的Javascript:
var transferData = getFormAsJson()
if (isMicrosoftBrowser()) {
// Case IE / Edge (because doesn't recoginzie Pdf-Base64 use Iframe)
var form = document.getElementById('pdf-helper-form');
$("#pdfHelperTransferData").val(transferData);
form.target = "iframe-pdf-shower";
form.action = "serverSideFunctonWhichWritesPdfinResponse";
form.submit();
} else {
// Case non IE use Object tag instead of iframe
$.ajax({
url: "serverSideFunctonWhichRetrivesPdfAsBase64",
type: "post",
data: { downloadHelperTransferData: transferData },
success: function (result) {
$("#object-pdf-shower").attr("data", result);
}
})
}
我们的HTML:
<div id="pdf-helper-hidden-container" style="display:none">
<form id="pdf-helper-form" method="post">
<input type="hidden" name="pdfHelperTransferData" id="pdfHelperTransferData" />
</form>
</div>
<div id="pdf-wrapper" class="modal-content">
<iframe id="iframe-pdf-shower" name="iframe-pdf-shower"></iframe>
<object id="object-pdf-shower" type="application/pdf"></object>
</div>
要检查IE/Edge的浏览器类型，请参阅此处:如何使用JavaScript检测Internet Explorer (IE)和Microsoft Edge ?我希望这些发现能为其他人节省时间。
