使用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 选择器 伪类选择器介绍
Jan 21 HTML / CSS
使用简单的CSS3属性实现炫酷读者墙效果
Jan 08 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 HTML / CSS
CSS3模拟IOS滑动开关效果
Sep 28 HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 HTML / CSS
Bootstrap 学习分享
Nov 12 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
Aug 07 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
May 03 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
html5响应式开发自动计算fontSize的方法
Jan 13 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 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
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
ThinkPHP整合百度Ueditor图文教程
2014/10/21 PHP
ThinkPHP安装和设置
2015/07/27 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
详解Python3.1版本带来的核心变化
2015/04/07 Python
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
Python简单实现安全开关文件的两种方式
2016/09/19 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
Python循环结构的应用场景详解
2019/07/11 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
2020/03/17 HTML / CSS
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
后勤副校长自我鉴定
2013/10/13 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
统计工作个人总结
2015/03/03 职场文书
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记
MySQL 语句执行顺序举例解析
2022/06/05 MySQL