在HTML中嵌入PDF的推荐方法是什么?
iFrame吗? 对象? 嵌入?
Adobe是怎么说的呢?
在我的例子中,PDF是动态生成的,因此不能在刷新之前将其上传到第三方解决方案。
在HTML中嵌入PDF的推荐方法是什么?
iFrame吗? 对象? 嵌入?
Adobe是怎么说的呢?
在我的例子中,PDF是动态生成的,因此不能在刷新之前将其上传到第三方解决方案。
当前回答
构造一个输入PDF字节的blob 使用跨浏览器补丁的iframe和PDF.js 解决方案
iframe的URI应该是这样的:
/viewer.html?file=blob:19B579EA-5217-41C6-96E4-5D8DF5A5C70B
现在FF, Chrome, IE 11和Edge都在iframe中显示PDF,通过URL中的标准blob URI传递。
其他回答
通过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 < div id = "例二" > < / div > 告诉PDFObject要嵌入哪个PDF,以及在哪里嵌入它 < script src = " / js / pdfobject.js " > < /脚本> > <脚本PDFObject.embed(“/ pdf / sample-3pp.pdf”、“#例二”),> < /脚本 您可以选择使用CSS来指定视觉样式,包括尺寸、边框、页边距等。 <时尚> .pdfobject-container{高度:500px;} .pdfobject {border: 1px solid #666;} > < /风格
来源:https://pdfobject.com/
我发现嵌入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 " > < /脚本>
您还可以使用谷歌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。
只使用iFrame的PDF文件。
我在React.js应用程序中有特定的需求,尝试了数百万个解决方案,但最终得到了一个iFrame:)祝你好运!