手机端html5展示pdf,pdf.js移动端展示预览打开pdf-pdfh5.js
pdf.js移动端展示预览打开pdf-pdfh5.js
本插件基于pdf.js和jQuery,可手势捏合缩放,支持懒加载(即分段加载)。
2019.07.18更新:增加npm install pdfh5使用方式,适应于vue,使用方式和api见github
2019.07.17更新:新增配置参数lazy,支持懒加载。
2019.07.10更新:新增部分api,配置参数。内部渲染机制改动:先画canvas再转为img 改成 直接渲染svg。后续会放出api文档。以及做成npm包引用(时间待定)
实例化:new Pdfh5(selector,options)
options可以不填:new Pdfh5(selector),不设置pdf路径,会默认拿地址栏的?file=后面的pdf路径
var pdfh5 = new Pdfh5('.pdfjs', { pdfurl: 'default.pdf' });
默认优先获取浏览器地址栏?file=后面的地址,如果地址栏没有,再拿配置项的pdfurl或者data来渲染pdf。
配置项参数 URIenable:false 可以无视地址栏参数,只拿配置项的pdfurl或者data来渲染pdf
var pdfh5 = new Pdfh5('.pdfjs', {
URIenable:false,
pdfurl: "./default.pdf"
});
例子:
html代码:
PDFH5
//当前默认优先获取浏览器地址栏?file=后面的地址,如果地址栏没有,再拿配置项的pdfurl或者data来渲染pdf
//优先顺序: ?file= > pdfurl > data
var pdfh5 = new Pdfh5('#demo', {
pdfurl: "./default.pdf"
});
//配置项参数 lazy:true 开启懒加载,默认是false,不开启懒加载
// var pdfh5 = new Pdfh5('#demo', {
// pdfurl: "./default.pdf",
// lazy:true
// });
//配置项参数 URIenable:false 可以无视地址栏参数,只拿配置项的pdfurl或者data来渲染pdf
// var pdfh5 = new Pdfh5('#demo', {
// URIenable:false,
// pdfurl: "./default.pdf"
// });
//pdf准备开始渲染,此时可以拿到pdf总页数
pdfh5.on("ready", function () {
console.log("总页数:" + this.totalNum)
})
//监听pdf渲染过程,currentPageDom当前加载的pdf的dom,currentNum当前加载的pdf页数,
pdfh5.on("render", function (currentNum, time, currentPageDom) {
console.log("当前渲染页:" + currentNum + ",耗时:" + time + "毫秒")
})
//监听完成事件,加载失败、渲染成功都会触发
pdfh5.on("complete", function (status, msg, time) {
console.log("状态:" + status + ",信息:" + msg + ",耗时:" + time + "毫秒,总页数:" + this.totalNum)
})
//监听pdf渲染成功
pdfh5.on("success", function (time) {
console.log("加载完成,耗时" + time + "毫秒")
})
//配置项参数 是否显示小部件 加载进度loadingBar 页面显示pageNum 回到顶部backTop 默认显示
// var pdfh5 = new Pdfh5('#demo', {
// loadingBar: false,
// pageNum:false,
// backTop:false
// });
//配置项参数data,文件流形式传入 pdfurl和data二选一
// var pdfh5 = new Pdfh5('#demo', {
// data: data
// });
//配置项参数scrollEnable:false不允许pdf滚动,true允许pdf滚动 默认允许
// var pdfh5 = new Pdfh5('#demo', {
// scrollEnable:false,//是否允许pdf滚动
// pdfurl: url
// });
//pdfh5.scrollEnable(true)允许pdf滚动,pdfh5.scrollEnable(false)不允许pdf滚动
//配置项参数zoomEnable:false不允许pdf手势缩放,true允许pdf手势缩放 默认允许
// var pdfh5 = new Pdfh5('#demo', {
// zoomEnable:false,//是否允许pdf滚动
// pdfurl: url
// });
//pdfh5.zoomEnable(true)允许pdf手势缩放,pdfh5.zoomEnable(false)不允许pdf手势缩放
//pdfh5还原、销毁(附带回调函数): pdfh5.reset pdfh5.destroy
//pdfh5显示、隐藏(附带回调函数): pdfh5.show pdfh5.hide
//on方法,监听各种事件: 开始初始化 init 准备渲染pdf ready 加载完成 complete 加载失败 error 加载成功 success 渲染pdf中 render
// 缩放zoom 滚动scroll 显示show 隐藏hide 还原reset 销毁destroy 允许缩放zoomEnable 允许滚动scrollEnable
// pdfh5.on("init",function(){
//
// })
// pdfh5.on("ready",function(){
//
// })
// pdfh5.on("complete",function(status,msg,time){
// this.zoomEnable(false)
// })
//pdfh5支持在线预览
//http://www.gjtool.cn/pdfh5/pdf.html?file=http://www.gjtool.cn/pdfh5/default.pdf
如果需要在线预览,那就把github上的项目下载,部署到自己的服务器上。
也可以用下面的地址在线预览,修改?file=后面的地址即可:
在地址栏最后添加?file="PDF文件的地址"
示例用法:
http://www.gjtool.cn/pdfh5/pdf.html?file=http://xxx.xxx.xxx/xxx.pdf
如果觉得插件还可以,就请点个星星吧,以后有空我会更新api文档,完善插件功能
最近才算闲下来了,新建了一个QQ前端学习交流群,欢迎加入前端交流h5,651601340,可以进来提pdfh5.js的bug、问题、建议等。
手机端html5展示pdf,pdf.js移动端展示预览打开pdf-pdfh5.js相关推荐
- 移动端图片预览插件-fly-zomm-img.min.js
移动端图片预览插件,一个JQ的插件,支持手势放大缩小:有点小bug,不过感觉是可以接受的: 插件的地址:http://www.jq22.com/jquery-info15466 那里有具体的说明,但是 ...
- 手机端与PC端在线预览PDF
问题场景 公司需要把出具的报告在PC端在线预览,之前一直用embed标签解决,效果很好.产品提出在手机端(微信链接或者手机浏览器)也要在线预览,尴尬的是安卓端提示的是下载,IOS端只能看不能滑动.经一 ...
- 加载js文件,在线预览pdf文档
加载js文件,在线预览pdf文档 效果演示 环境要求 JS文件下载 Jsp页面导入js文件 jquery.media.js源码 效果演示 首先,先展示效果图 环境要求 Tomcat8.5 [注意]:T ...
- pdf.js插件使用记录,在线打开pdf
pdf.js插件使用记录,在线打开pdf 原文:pdf.js插件使用记录,在线打开pdf 天记录一个js库:pdf.js.主要是实现在线打开pdf功能.因为项目需求需要能在线查看pdf文档,所以就研究 ...
- 微信小程序实现PDF预览功能——pdf.js(含源码解析)
文章目录 前言 一.pdf.js 是什么? 二.使用步骤 1.下载库文件 2.使用方式 微信小程序端--使用 web-view 标签 H5 端--使用 iframe 标签(使用vue框架) 3.更改源 ...
- php手机端多图预览上传,JS实现多图预览上传的实例代码
这篇文章主要介绍了JS实现多张图片预览同步上传功能的相关资料,需要的朋友可以参考下 废话不多说了,直接给大家贴代码了,具体代码如下所示: /** * Created by liujing on 201 ...
- Adobe Reader 文档无法签名_如何在Mac上使用预览对PDF进行电子签名
当您通过电子邮件收到必须签名的PDF文档时,打印文件,用钢笔在虚线上签名,扫描签名的文档并将其发回的过程可能是一项相当繁琐的任务.幸运的是,苹果公司增加了使用预览功能对PDF文档进行电子签名的功能,该 ...
- ios预览在线pdf
最近公司用vue做跨平台前端,然后直接用UIWebView封装成app.体验还不错. 但是在预览附件的时候遇到一些问题: 1. 在页面中点击jpg文件可以正常预览,预览完成后可以关闭返回主页面: 2. ...
- 如何在Mac上使用预览对PDF进行电子签名
当您通过电子邮件收到必须签名的PDF文档时,打印文件,用钢笔在虚线上签名,扫描签名的文档并将其发回的过程可能是一项相当繁琐的任务.幸运的是,苹果公司增加了使用预览功能对PDF文档进行电子签名的功能,该 ...
最新文章
- SMW0上传模板下载到本地
- Flutter中Row中的子控件左右两端对齐
- Go基础--goroutine和channel
- Linux kill指令和killall指令
- laravel increment出现了翻倍递增_中国股市:如何判断“强庄股”的出现,看懂主力心甘情愿送钱上门...
- java socket 包头包体_使用JAVA上抓取Socket服务端和客户端通信TCP数据包
- Java中线程的创建有两种方式
- app中的h5游戏分享到微信等第三方
- Objective--C Practice and source code
- GD32 startup.s
- 【树莓派】使用VNC远程桌面
- Stata:图示交互效应-调节效应
- c语言实现http下载功能
- Bugzilla的安装和配置
- sqlserver导入sql文件的方式
- JetBrain系列软件的学生授权认证及认证到期重新申请授权
- delmatch oracle_Oracle ERP 技术探讨
- MSP430F5529-串口介绍
- PCB线路板为何板层数越高制作难度也越高?
- 把荷花照片调成古典工笔画的PS方法
热门文章
- Python 列表、字典、元组的一些小技巧
- 在线作图|如何画韦恩图(包含upset图)
- QB:基于深度学习的病毒序列识别
- h5在线浏览word_怎样将PDF在线转换成Word?教你成为一个高手的方法
- pandas基于dataframe字符串数据列不包含特定字符串来筛选dataframe中的数据行(rows where values do not contain substring)
- R语言使用ggplot2包使用geom_violin函数绘制分组小提琴图(配置显示均值、中位数)实战
- pandas使用isna函数和any函数计算返回dataframe中包含缺失值的数据行(rows with missing values in dataframe)
- R语言使用pwr包的pwr.t.test函数对分组样本数相同的t检验进行效用分析(power analysis)、在已知效应量(effect size)、显著性水平、样本量的情况下计算假设检验的效用值
- sklearn使用投票器VotingClassifier算法构建多模型融合的硬投票器分类器(hard voting)并计算融合模型的混淆矩阵、可视化混淆矩阵(confusion matrix)
- R语言ggplot2可视化:将条形图(bar plot)和线图(line plot)组合在一起并使用双Y轴(double y axis)进行可视化、其中一个Y轴显示为百分比