使用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 box-sizing属性使用参考指南
Jan 08 HTML / CSS
深入理解css中vertical-align属性
Apr 18 HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 HTML / CSS
html5的canvas实现3d雪花飘舞效果
Dec 27 HTML / CSS
基于html5实现的图片墙效果
Oct 16 HTML / CSS
简单介绍HTML5中audio标签的使用
Sep 24 HTML / CSS
用canvas画心电图的示例代码
Sep 10 HTML / CSS
前端实现打印图像功能
Aug 27 HTML / CSS
Bootstrap File Input文件上传组件
Dec 01 HTML / CSS
CSS3 实现NES游戏机的示例代码
Apr 21 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/01 无线电
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
php上传大文件设置方法
2016/04/14 PHP
PHP微信开发之查询微信精选文章
2016/06/23 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
js 程序执行与顺序实现详解
2013/05/13 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
Python实现简单登录验证
2016/04/13 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
斯福泰克软件测试面试题
2015/02/16 面试题
毕业生面试求职信
2014/06/23 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
旅行社计调工作总结
2015/08/12 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python