html页面中如何显示pdf文件

时间:2017-11-03
今天客户有一个简单的需求,要求html页面中能嵌套pdf文件,以便用户可以阅读pdf文件中的内容,当时有点懵,不知道如何实现,后来网上找到了解决方法,于是记录下来和大家一起分享一下。

今天,客户有个新的需求,需要在html页面中嵌入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>

方法二:PDFObject

关于PDFObject,大家可以阅读这个文档:https://pdfobject.com/

具体实现代码:

<div id="example1"></div>
<script src="/js/pdfobject.js"></script>
<script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>