我使用谷歌文档可嵌入的PDF阅读器。这些文档不必上传到谷歌文档,但它们必须在线上可用。
<iframe src="http://docs.google.com/gview?url=http://path.com/to/your/pdf.pdf&embedded=true"
style="width:600px; height:500px;" frameborder="0"></iframe>
建议使用 object 标签
<object data='http://website.com/nameoffolder/documentname.pdf#toolbar=1'
type='application/pdf'
width='100%'
height='700px'>
请注意,您可以将宽度和高度更改为任何值,请访问http://www.w3schools.com/tags/tag_object.asp
最简单的方法是创建一个iframe并将源设置为PDF的URL。
(躲避疯狂的HTML设计师)我自己做过,效果很好,跨浏览器(爬进掩体)。
浏览器的插件控制这些设置,所以你无法强制它。但是,你可以使用简单的<a href="whatver.pdf">
代替<a href="whatever.pdf" target="_blank">
。
<e>
<a target="_blank" alt="StackExchange Handbook" title="StackExchange Handbook"
href="pdfs/StackExchange_Handbook.pdf">StackExchange Handbook</a>
对于绝对路径,引擎将前往统一资源定位符并在其中打开它。因此,请禁止目标属性。
<e>
<a alt="StackExchange Handbook" title="StackExchange Handbook"
href="protocol://url/StackExchange_Handbook.pdf">StackExchange Handbook</a>
<embed src="http://domain.com/your_pdf.pdf" width="600" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">
或使用Google文档可嵌入的PDF查看器:
<iframe src="http://docs.google.com/gview?url=http://domain.com/your_pdf.pdf&embedded=true"
style="width:600px; height:500px;" frameborder="0"></iframe>
如果您不想使用第三方工具,可以使用<embed>
标签,并在src
属性中指定文件源。这将使用浏览器本地的PDF查看器,比object
标签更受浏览器支持。
<embed src="your_pdf_src" style="position:absolute; left: 0; top: 0;" width="100%" height="100%" type="application/pdf">
实时示例:
<embed src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" style="position:absolute; left: 0; top: 0;" width="100%" height="100%" type="application/pdf">
在片段中加载PDF是行不通的,因为插件加载到的框架是被沙盒化的。
在Chrome和Firefox中测试通过。 查看演示。
object
标签在 ES2015 中是标准的,取代了 embed
标签。 - manikantaembed
是 HTML5 规范的一部分。请参见:https://html.spec.whatwg.org/#embedded-content-2 - SpectricAdobe发布了完全免费的Adobe PDF嵌入API。由于他们创建了PDF格式本身,因此他们的API可能是最好的。
您所要做的就是创建一个api_key
并在代码片段中使用它。
这是代码片段的示例,如果您有缓冲区(例如本地文件),只需将其添加到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>
file_url
显示PDF文件以下是一个代码片段的示例,您可以将其添加到您的HTML中,并利用他们的API来显示由file_url
提供的PDF文件。您需要添加{ location: { url: "pdf文件的url" } }
配置。
<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>