使用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打造动感漂亮时尚的扇形菜单
Mar 18 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
css3选择器基本介绍
Dec 15 HTML / CSS
纯css3制作网站后台管理面板
Dec 30 HTML / CSS
CSS3标注引用的出处和来源的方法
Feb 25 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
Nov 02 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
html5用video标签流式加载的实现
May 20 HTML / CSS
如何通过 CSS 写出火焰效果
Mar 24 HTML / CSS
CSS实现两列布局的N种方法
Aug 02 HTML / CSS
CSS的calc函数用法小结
Jun 25 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
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
PHP 地址栏信息的获取代码
2009/01/07 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
IE php关于强制下载文件的代码
2008/08/23 Javascript
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
深入理解Python中字典的键的使用
2015/08/19 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
Delphi软件工程师试题
2013/01/29 面试题
求职信的要素有哪些呢
2013/12/26 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
入党积极分子评语
2014/05/04 职场文书
广告宣传策划方案
2014/05/21 职场文书
地方白酒代理协议书
2014/10/25 职场文书
爱情保证书
2015/01/17 职场文书
工作后的感想
2015/08/07 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL