在HTML中嵌入PDF的推荐方法是什么?
iFrame吗? 对象? 嵌入?
Adobe是怎么说的呢?
在我的例子中，PDF是动态生成的，因此不能在刷新之前将其上传到第三方解决方案。
当前回答
更新- adobepdf嵌入API
Adobe发布了他们的adobepdf嵌入API，这是完全免费的。由于他们自己创建了PDF格式，他们的API可能是最好的。
它提供了最高质量的PDF渲染。 您可以完全自定义用户体验并选择如何显示PDF。 您还可以分析PDF的使用情况，以便了解用户如何与PDF交互，包括在页面和搜索上花费的时间。
你所要做的就是创建一个api_key并在代码片段中使用它。
通过file_url显示PDF
下面是代码片段的示例，您可以将其添加到HTML中，并利用它们的API通过file_url显示PDF。你必须添加{location: {url: "url_of_the_pdf"}}配置。
<div id="adobe-dc-view"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView = new AdobeDC.View({clientId: "api_key", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content: { location: { url: "url_of_the_pdf" } },
metaData: { fileName: "file_name_to_display" }
}, {});
});
</script>
将PDF显示为缓冲区
下面是代码片段的示例，如果您有缓冲区(例如本地文件)，您可以将其添加到HTML中，并利用它们的API来显示PDF。你必须添加{promise: <FILE_PROMISE>}配置。
<div id="adobe-dc-view"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView = new AdobeDC.View({clientId: "api_key", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content: { promise: <FILE_PROMISE> }
metaData: { fileName: "file_name_to_display" }
}, {});
});
</script>
其他回答
您可以通过在查询字符串中传递一些选项来控制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.JS，你可以试试DocDroid。它类似于谷歌Drive 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 " > < /脚本>
<embed src="data:application/pdf;base64,..."/>
<object width="400" height="400" data="helloworld.pdf"></object>
