使用PDF.JS插件在HTML中预览PDF文件的方法


Posted in HTML / CSS onAugust 29, 2018

PDF.js是一款基于HTML5建立的PDF阅读器,兼容大部分主流的浏览器,使用起来,也相对简单。步骤如下:

1.下载PDF.js插件

下载地址:http://mozilla.github.io/pdf.js/getting_started/#download

2.文件部署

建新文件夹,将PDF.js插件文件放入新建的文件夹。

3.新建index.html

在HTML文件代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="google" content="notranslate">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>《使用指南》-柠檬课件</title>
    <script>
      function openFile () {
        var url = "pdf.pdf";
        window.open("pdfjs/web/viewer.html?file=" + url);
      }
    </script>
  </head>
  <body>
    <input type="button" onclick="openFile()" value="打开">
  </body>
</html>

4.将pdf.pdf文件放到pdfjs/web/下

5.点击浏览即可。

注意:因为pdf.js需要依赖http,https协议。所以直接浏览index打开报错。搭个服务,或者用idea的浏览就可以了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3样式linear-gradient的使用实例
Jan 16 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
css图标制作教程制作云图标
Jan 19 HTML / CSS
CSS3弹性盒模型开发笔记(二)
Apr 26 HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 HTML / CSS
分享一个H5原生form表单的checkbox特效代码
Feb 26 HTML / CSS
web页面录屏实现
Feb 12 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
Jan 23 HTML / CSS
HTML5样式控制示例代码
Nov 27 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
Mar 13 HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 07 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
Aug 28 #HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
Aug 28 #HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 #HTML / CSS
html5中audio支持音频格式的解决方法
Aug 24 #HTML / CSS
HTML5实现音频和视频嵌入的方法
Aug 22 #HTML / CSS
canvas学习和滤镜实现代码
Aug 22 #HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 #HTML / CSS
You might like
php中一个有意思的日期逻辑处理
2012/03/25 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
python通过yield实现数组全排列的方法
2015/03/18 Python
Python实现抓取城市的PM2.5浓度和排名
2015/03/19 Python
Python基于百度云文字识别API
2018/12/13 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
Python如何使用input函数获取输入
2020/08/06 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
用 python 进行微信好友信息分析
2020/11/28 Python
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
公证委托书模板
2014/04/03 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
学生会招新宣传语
2015/07/13 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
go goroutine 怎样进行错误处理
2021/07/16 Golang
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android