使用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的Media Queries(跨平台设计)
Jul 27 HTML / CSS
css3 按钮样式简单可扩展创建
Mar 18 HTML / CSS
css3制作彩色边线3d立体按钮的示例(css3按钮)
May 06 HTML / CSS
一款纯css3实现的颜色渐变按钮的代码教程
Nov 12 HTML / CSS
css3实现可拖动的魔方3d效果
May 07 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
Jun 27 HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
Sep 11 HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 HTML / CSS
Html5实现首页动态视频背景的示例代码
Sep 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
迅雷下载《中学科技》怀旧期刊下载
2021/02/27 无线电
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
angularjs中的$eval方法详解
2017/04/24 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
hammer.js实现图片手势放大效果
2017/08/29 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
Python中处理字符串之islower()方法的使用简介
2015/05/19 Python
python显示生日是星期几的方法
2015/05/27 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
Python正则表达式如何匹配中文
2020/05/27 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
电气自动化自荐信
2013/10/10 职场文书
医院后勤自我鉴定
2013/10/13 职场文书
国际贸易系求职信
2014/08/09 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
ES6 解构赋值的原理及运用
2021/05/25 Javascript