使用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轻松实现圆角效果
Nov 09 HTML / CSS
IE兼容css3圆角的实现代码
Jul 21 HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
Jan 20 HTML / CSS
canvas实现圆形进度条动画的示例代码
Dec 26 HTML / CSS
详解webapp页面滚动卡顿的解决办法
Dec 26 HTML / CSS
HTML5自定义属性的问题分析
Aug 16 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 20 HTML / CSS
html,css,javascript是怎样变成页面的
May 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中通过curl检测页面是否被百度收录
2013/09/27 PHP
PHP7常量数组用法分析
2016/09/26 PHP
PHP数据库操作四:mongodb用法分析
2017/08/16 PHP
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
学习python的几条建议分享
2013/02/10 Python
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
python中解析json格式文件的方法示例
2017/05/03 Python
Python Flask-web表单使用详解
2017/11/18 Python
Random 在 Python 中的使用方法
2018/08/09 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
Python的UTC时间转换讲解
2019/02/26 Python
python读取大文件越来越慢的原因与解决
2019/08/08 Python
植物生产学专业求职信
2014/08/08 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
户外亲子活动总结
2015/05/08 职场文书
2016十一国庆节感言
2015/12/09 职场文书
《小小的船》教学反思
2016/02/18 职场文书
小学语文教学反思范文
2016/03/03 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python
DIY胆机必读:各国电子管评价
2022/04/06 无线电