使用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 相关文章推荐
今天学到的CSS最新技术(与图片背景相关)
Dec 24 HTML / CSS
发现两个有趣的CSS3动画效果
Aug 14 HTML / CSS
CSS3实现可关闭的下拉手风琴菜单效果
Aug 31 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
Jun 10 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
Canvas实现保存图片到本地的示例代码
Jun 28 HTML / CSS
HTML5拍照和摄像机功能实战详解
Jan 24 HTML / CSS
萌新的HTML5 入门指南
Nov 06 HTML / CSS
Css预编语言及区别详解
Apr 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
浅析PHP水印技术
2007/02/14 PHP
提高PHP编程效率的方法
2013/11/07 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
PHP重载基础知识回顾
2020/09/10 PHP
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
php实例分享之实现显示网站运行时间
2014/05/20 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
python查看FTP是否能连接成功的方法
2015/07/30 Python
详解python OpenCV学习笔记之直方图均衡化
2018/02/08 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
Python绘制动态水球图过程详解
2020/06/03 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
儿科护士实习自我鉴定
2013/10/17 职场文书
单位承诺书格式
2014/05/21 职场文书
办理信用卡工作证明
2014/09/30 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python