在HTML中嵌入PDF的推荐方法是什么?
iFrame吗? 对象? 嵌入?
Adobe是怎么说的呢?
在我的例子中,PDF是动态生成的,因此不能在刷新之前将其上传到第三方解决方案。
在HTML中嵌入PDF的推荐方法是什么?
iFrame吗? 对象? 嵌入?
Adobe是怎么说的呢?
在我的例子中,PDF是动态生成的,因此不能在刷新之前将其上传到第三方解决方案。
当前回答
同时使用<object>和<embed>将为您提供更广泛的浏览器兼容性。
<object data="http://yoursite.com/the.pdf" type="application/pdf" width="750px" height="750px">
<embed src="http://yoursite.com/the.pdf" type="application/pdf">
<p>This browser does not support PDFs. Please download the PDF to view it: <a href="http://yoursite.com/the.pdf">Download PDF</a>.</p>
</embed>
</object>
其他回答
我发现这工作得很好,浏览器处理它在firefox。我没有检查IE…
<script>window.location='url'</script>
我发现嵌入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 " > < /脚本>
在我得到嵌入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> .
更新- 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嵌入HTML
<!-- Embed PDF File -->
<object src="YourFile.pdf" type="application/pdf" title="SamplePdf" width="500" height="720">
<a href="YourFile.pdf">shree</a>
</object>