我有一个自动生成的PDF文件,我需要在HTML中显示该PDF文件。我的问题是:如何在HTML中使用PDF .js显示本地PDF文件?PDF文件是否应该按照某些标准生成?
当前回答
我使用谷歌Docs嵌入式PDF查看器。这些文档不必上传到谷歌docs,但必须在网上可用。
<iframe src="https://docs.google.com/gview?url=https://path.com/to/your/pdf.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
其他回答
在html页面的pc很容易实现
<embed src="study/sample.pdf" type="application/pdf" height="300px" width="100%">
但PDF显示在移动的这段代码是不可能的,你必须需要一个插件
如果你没有响应你的网站。然后上面的代码pdf不显示在手机上,但你可以把下载选项后的代码
<embed src="study/sample.pdf" type="application/pdf" height="300px" width="100%" class="responsive">
<a href="study/sample.pdf">download</a>
更新- adobepdf嵌入API
Adobe发布了他们的adobepdf嵌入API,这是完全免费的。由于他们自己创建了PDF格式,他们的API可能是最好的。
它提供了最高质量的PDF渲染。 您可以完全自定义用户体验并选择如何显示PDF。 您还可以分析PDF的使用情况,以便了解用户如何与PDF交互,包括在页面和搜索上花费的时间。
你所要做的就是创建一个api_key并在代码片段中使用它。
将PDF显示为缓冲区(例如本地文件)
下面是代码片段的示例,如果您有缓冲区(例如本地文件),您可以将其添加到HTML中,并利用它们的API来显示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: { promise: <FILE_PROMISE> }
metaData: { fileName: "file_name_to_display" }
}, {});
});
</script>
您可以像这样轻松地在HTML页面中显示
<embed src="path_of_your_pdf/your_pdf_file.pdf" type="application/pdf" height="700px" width="500">
你可以使用
<iframe src="your_pdf_file_path" height="100%" width="100%" scrolling="auto"></iframe>
或者,如果你想让它占据整页:
<a href="your_pdf_file_path">Link</a>
元素受到所有浏览器的支持,并在HTML文档中定义了一个嵌入对象。
底线:OBJECT是好的,EMBED是旧的。除了IE的PARAM标签之外,如果浏览器不支持OBJECT的引用插件,OBJECT标签之间的任何内容都会被渲染,而且显然,无论内容是否被渲染,它都会被http请求。参考
工作代码:https://www.w3schools.com/code/tryit.asp?filename=G7L8BK6XC0A6
<!DOCTYPE html > < html > 身体< > <object width="400px" height="400px" data="https://s3.amazonaws.com/dq-blog-files/pandas-cheat-sheet.pdf"></object> 身体< / > < / html >