使用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 相关文章推荐
支持IE8的纯css3开发的响应式设计动画菜单教程
Nov 05 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 HTML / CSS
HTML5等待加载动画效果
Jul 27 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
Oct 23 HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 HTML / CSS
Web前端:CSS最强总结 附详细代码
Mar 31 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实现的封装验证码类详解
2013/06/18 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
2016/09/06 Javascript
JS前端加密算法示例
2016/12/22 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
2020/10/27 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
20行python代码实现人脸识别
2019/05/05 Python
python的依赖管理的实现
2019/05/14 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
python 穷举指定长度的密码例子
2020/04/02 Python
Python调用飞书发送消息的示例
2020/11/10 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
自荐信格式技巧有哪些呢
2013/11/19 职场文书
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
2014年秋季开学典礼主持词
2014/08/02 职场文书
2014年招商工作总结
2014/11/22 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书