使用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等相关属性制作分页导航实现代码
Dec 24 HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
Mar 11 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
Jul 02 HTML / CSS
HTML5中新标签和常用标签详解
Mar 07 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
May 14 HTML / CSS
HTML5未来发展趋势
Feb 01 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 HTML / CSS
HTML5微信播放全屏问题的解决方法
Mar 09 HTML / CSS
AmazeUI 列表的实现示例
Aug 17 HTML / CSS
原生CSS实现文字无限轮播的通用方法
Mar 30 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
天津市收音机工业发展史
2021/03/04 无线电
图象函数中的中文显示
2006/10/09 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
ES6新增的数组知识实例小结
2020/05/23 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
从零学Python之入门(四)运算
2014/05/27 Python
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
python轻松查到删除自己的微信好友
2016/01/10 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
护士毕业自我鉴定
2014/02/07 职场文书
教师开学感言
2014/02/14 职场文书
法人授权委托书格式
2014/04/08 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
2014年学雷锋活动总结
2014/06/26 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python