使用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色彩
Jan 16 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 HTML / CSS
canvas绘制文本内容自动换行的实现代码
Jan 14 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
Dec 13 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
Jun 20 HTML / CSS
会走动的图形html5时钟示例
Apr 27 HTML / CSS
Html5 语法与规则简要概述
Jul 29 HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 HTML / CSS
html svg生成环形进度条的实现方法
Sep 23 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
Sep 23 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延迟静态绑定实例分析
2015/02/08 PHP
PHP多维数组排序array详解
2017/11/21 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
让你的网站可编辑的实现js代码
2009/10/19 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
Django 批量插入数据的实现方法
2020/01/12 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
工程测量与监理专业应届生求职信
2013/11/27 职场文书
酒店实习个人鉴定
2013/12/07 职场文书
面料业务员岗位职责
2013/12/26 职场文书
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
国际金融专业自荐信
2014/07/05 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
Python 中 Shutil 模块详情
2021/11/11 Python