浏览器预览pdf

您所在的位置:网站首页 pdf页面预览怎么开 浏览器预览pdf

浏览器预览pdf

2023-12-21 04:38| 来源: 网络整理| 查看: 265

转载:html中前端页面预览pdf文档的6种方法 - 简书

1. a标签

这种方法就需要人为点击链接才会显示pdf文件内容,是显示还是下载就决定于浏览器的解释方法了。

预览pdf文件

注意:想通过这样方式预览pdf文件,需要保证pdf上传的时候其文件类型content-type一定要设置为pdf格式(即content-type=“application/pdf”),不然点击链接的时候,不能正常预览文件,会弹出下载页面。

2. embed标签 3. object标签 This browser does not support PDFs. Please download the PDF to view it: Download PDF 4. iframe标签 This browser does not support PDFs. Please download the PDF to view it: Download PDF 5. jquery.media.js插件

jQuery Media Plugin是一款基于jQuery的网页媒体播放器插件,他支持大部分的网络多媒体播放器和多媒体格式,插件可以更加当前的校本配置,自动将a标签替换成div,并生成object,embed甚至是iframe代码,至于生成object还是embed,jQuery Media会根据当前平台自动判别,因此兼容方面非常出色。所以这个插件的实现功能就是上面标签功能是一样的,那么在浏览器上面的显示也会是一样的。

在使用时需要引入js文件,

 html端通过href来定位到需要打开的pdf文件。

6. pdf.js框架

前面三种方法是基于标签,可能每个浏览器的解释效果不一样,那么pdf.js框架利用js语言,就可以兼容统一的显示pdf文件。如果文档不想下载的话,可以在view.html中奖下载按钮隐藏或删除,而标的下载按钮是无法取消的。

官网或者github上下载pdf.js资源包,里面提供了一些使用demo。笔者是apache服务器,浏览器直接定位到viewer.html,http://localhost/pdfjs/web/viewer.html就可以查看实例pdf文件。viewer.html是渲染pdf阅读器的样式,viewer.js则是指定打开的pdf文件,可以在文件中搜索目标文件就可以找到了,修改viewer.js文件中的pdf路径参数可以选择其他文档。在实际应用中,可以在viewer.html后添加参数通过页面参数传值的方式加载pdf文件,比如http://localhost/pdfjs/web/viewer.html?file=unixtest.pdf  ,那就可以打开unixtest.pdf文件了 。

      可以对比一下标签和pdf.js,后者在html界面上显示的功能更加丰富,功能也更加强大,具体使用方法就不在累赘说明了,请自行搜索。  



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3