在HTML中嵌入PDF的推荐方法是什么?

iFrame吗? 对象? 嵌入?

Adobe是怎么说的呢?

在我的例子中,PDF是动态生成的,因此不能在刷新之前将其上传到第三方解决方案。


当前回答

我发现嵌入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 " > < /脚本>

其他回答

PdfToImageServlet使用ImageMagick的convert命令。

使用的例子: < img src = " / webAppDirectory / PdfToImageServlet ? pdfFile = / usr /共享/杯/数据/ default-testpage.pdf ' >

这是快速、简单、直截了当的,不需要任何第三方脚本:

<embed src="http://example.com/the.pdf" width="500" height="375" 
 type="application/pdf">

更新(2/3/2021)

Adobe现在提供了自己的PDF嵌入API。

https://www.adobe.io/apis/documentcloud/dcsdk/pdf-embed.html

更新(1/2018):

Android上的Chrome浏览器不再支持PDF嵌入。你可以通过使用谷歌Drive PDF查看器来解决这个问题

<embed src="https://drive.google.com/viewerng/
viewer?embedded=true&url=http://example.com/the.pdf" width="500" height="375">

如果可能的话,使用本机解决方案,它总是最好的解决方案,因为它来自本机浏览器(使用embed或iframe),或者你可以使用这个小库来支持你:https://pdfobject.com

大多数人推荐使用著名的pdf。js。它一直工作得很好,直到我需要使用ShadowDOM。有些页面是空白的(白色),有些是黑色的。我不可能知道发生了什么,而且它正在制作中:)。

<object width="400" height="400" data="helloworld.pdf"></object>

在我得到嵌入base64编码PDF的问题之前,因为URI限制,所以任何超过2MB的文件都不会在Chrome上正确呈现。

我的解决方案是:

转换uri编码为Blob: 基于Blob生成临时DOM字符串。 const blob = dataURItoBlob(this.dataUrl); var temp_url = window.URL.createObjectURL(blob); 决定你想把iframe附加到DOM的位置: const target = document.querySelector(targetID); 目标。innerHTML =' <iframe src='${temp_url}' type="application/pdf"></iframe> .