开启左侧

html页面在线预览PDF文件的几种方法

[复制链接]
admin 发表于 2020-2-25 19:49:50 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
纯HTML解决PDF显示,解决方法
1.HTML5新标签<embed>
定义和用法

<embed> 标签定义嵌入的内容,比如插件。
实例

<embed src="helloworld.pdf" type="application/pdf" width="100%" height="100%" internalinstanceid="81 />

2.<iframe>

<iframe>方法是嵌入PDF的最简单方法之一。但是,如果<iframe>浏览器不支持PDF呈现,则可能无法提供足够的后备内容。
实例

    <iframe src="您的PDF地址" width="100%" height="100%">
     该浏览器无法支持PDF,请点击查看:
    <a href="PDF地址">下载 PDF</a></iframe>

3.<object>

与<embed>不同,<object>如果浏览器不支持PDF嵌入,则该元素可提示内容。所有浏览器都支持<object>元素,但是,每个浏览器中的实现方式通常存在差异。如果您使用该<object>元素,请务必在浏览器和操作系统中彻底测试您的页面。
实例

    <object data="您的pdf地址" type="application/pdf" width="100%" height="100%">
    <p><b>返回内容</b>: 该浏览器不支持PDFs.请点击查看:
    <a href="PDF地址">Download PDF</a>.</p>
    </object>

4.<object><iframe></object>

    <object data="您的pdf地址" type="application/pdf" width="100%" height="100%">
    <iframe src="您的PDF地址" width="100%" height="100%" style="border: none;">
    该浏览器不支持PDFs,请单击查看:
    <a href="您的PDF地址">Download PDF</a>
    </iframe>
    </object>
5. 依赖:jquery.media.js,自行百度下载

下载后放入指定位置,例:/static/js/lib/jquery.media.js

静态页面核心代码:

<div id="pdf_preview"></div>

以上静态页面还需要引入js文件和依赖

    <script src="#springUrl('/static/js/sys/test.js')"></script>
    <script type="text/javascript" src="/static/js/lib/jquery.media.js"></script>

test.js文件核心代码:

    src = '******.pdf';
    $('#pdf_preview').media(
    {
      width : '1380px',
      height : '800px',
      autoplay : true,
      src : src,
    });

src属性写入pdf文件的访问路径,放在项目中的相对路径或放在服务器中的绝对路径都可以访问到。


以上例子,不设置宽高默认会全屏显示。

默认情况下,当浏览器不支持嵌入式PDF时,PDFObject会向PDF插入后备链接。这可确保您的用户始终可以访问您的PDF,并旨在帮助您编写更少的代码。

html 实现动态在线预览word、excel、pdf等文件
通过iframe直接引用微软提供的方法

    <iframe src='https://view.officeapps.live.com/op/view.aspx?src=http://storage.xuetangx.com/public_assets/xuetangx/PDF/1.xls' width='100%' height='100%' frameborder='1'>
                </iframe>

https://view.officeapps.live.com/op/view.aspx?src= 后边添加需要预览的内容

注意:链接包含中文需要进行URL编码,并且文档必须可在Internet上公开访问

官方使用文档

pdf在线浏览

PDF.js下载地址

http://jhyt.oss-cn-shanghai.aliy ... 199089_PDFObject.js

使用方法

引入pdf.js文件

<script src="./js/PDF/PDFObject.js" type="text/javascript"></script>c

创建有个div用于展示

<div id="example1"></div>

通过js动态添加需要浏览的pdf地址

     var options = {
                height: "550px",
                pdfOpenParams: {view: 'FitV', page: '0' },
                name:"mans",
                fallbackLink: "<p>您的浏览器暂不支持此pdf,请下载最新的浏览器</p>"
            };
    PDFObject.embed(url, "#example1",options);

预览效果






http://tolee.net/forum.php?mod=attachment&aid=MTI5NXwwYTdkMDk1N2RlNDRhZjgxYWU0OWQyYjkxYTMxNGQxZXwxNTg1ODg5Njg0&request=yes&_f=.pdf


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关注0

粉丝0

帖子63

发布主题
阅读排行更多+
用心服务 热心公益
q66619987
周一至周日 24小时
意见反馈:richen#126.com

扫一扫关注我们

桃李赢天下 by Discuz! X3.4© 2018 Comsenz Inc.( 粤ICP备18037673号 )