pdfh5.js 基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件。
pdfh5.js 基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件。
注意:本地绝对路径地址不能加载,跨域问题用代理或者服务端解决。
svg模式渲染存在缺陷,只能渲染普通pdf,带签名、印章的可能会渲染不全,报错,pdf.js官方目前没有给出解决方案
canvas模式本质是图片,默认进去的时候,图片在手机端被缩放,不是原分辨率,所以失真模糊。所以需要放大查看pdf
pdfh5博客主页
pdfh5项目GitHub地址
react、vue均可使用
example/test是vue使用示例,vue示例展示axios调用接口展示pdf,跨域代理,相对路径等方法
example/react-test是react使用示例
更新信息
- 2020.07.30 更新: 更新jquery版本至jquery-2.1.1.min.js
pdfh5在线预览 (建议使用谷歌浏览器F12手机模式打开预览)
- https://www.gjtool.cn/pdfh5/pdf.html?file=https://www.gjtool.cn/pdfh5/git.pdf
快速使用(有两种方式)
一、script标签引入方式(需下载本项目文件夹css/pdfh5.css、js内所有文件)
- 1.引入css
<link rel="stylesheet" href="css/pdfh5.css" />
- 2.创建div
<div id="demo"></div>
- 3.依次引入js(需引用本项目的js,不要引用官方的pdf.js,jquery可以引用其它版的)
<script src="js/pdf.js" type="text/javascript" charset="utf-8"></script>
<script src="js/pdf.worker.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
- 4.实例化
var pdfh5 = new Pdfh5('#demo', {pdfurl: "./default.pdf"
});
二、npm安装方式(适应于vue), react使用方法类似vue(example/react-test是react使用示例)
- 1.安装
npm install pdfh5
- 2.使用
<template><div id="app"><div id="demo"></div></div>
</template>
<script>import Pdfh5 from "pdfh5";export default {name: 'App',data() {return {pdfh5: null};},mounted() {//实例化this.pdfh5 = new Pdfh5("#demo", {pdfurl: "../../static/test.pdf"});//监听完成事件this.pdfh5.on("complete", function (status, msg, time) {console.log("状态:" + status + ",信息:" + msg + ",耗时:" + time + "毫秒,总页数:" + this.totalNum)})}}
</script><style>@import "pdfh5/css/pdfh5.css";*{padding: 0;margin: 0;}html,body,#app {width: 100%;height: 100%;}
</style>
- 注意:如果css引用报错的话,按下面的方式引用。
import Pdfh5 from "pdfh5";import "pdfh5/css/pdfh5.css";
API接口方法
实例化
- pdfh5实例化的时候传两个参数,selector选择器,options配置项参数,会返回一个pdfh5实例对象,可以用来操作pdf,监听相关事件
var pdfh5 = new Pdfh5(selector, options);
参数名称 | 类型 | 取值 | 是否必须 | 作用 |
---|---|---|---|---|
selector | - | √ | pdfh5的容器选择器 | |
options | - | × | pdfh5的配置项参数 |
options配置项参数列表
- 示例: 配置项参数 pdfurl
var pdfh5 = new Pdfh5('#demo', {pdfurl: "./default.pdf"
});
参数名称 | 类型 | 取值 | 作用 |
---|---|---|---|
pdfurl | - | pdf地址 | |
URIenable | true、false, 默认false | true开启地址栏file参数 | |
data | {String(blob)/Array(arraybuffer) | - | pdf文件流 ,与pdfurl二选一(二进制PDF数据。使用类型化数组(Uint8Array)可以提高内存使用率。如果PDF数据是BASE64编码的,请先使用atob()将其转换为二进制字符串。) |
renderType | "canvas"、"svg",默认"canvas" | pdf渲染模式 | |
pageNum | true、false, 默认true | 是否显示左上角页码 | |
backTop | true、false, 默认true | 是否显示右上角回到顶部按钮 | |
lazy | true、false, 默认false | 是否开启懒加载(实际是延迟加载图片,即屏幕滚动到pdf位置时加载图片) | |
maxZoom | 最大倍数3 | 手势缩放最大倍数 | |
scale | 最大比例5,默认1.5 | pdf渲染的比例 | |
scrollEnable | true、false, 默认true | 是否允许pdf滚动 | |
zoomEnable | true、false, 默认true | 是否允许pdf手势缩放 | |
cMapUrl | 默认"https://www.gjtool.cn/cmaps/" | 解析pdf时,特殊情况下显示完整字体的cmaps文件夹路径,例如 cMapUrl:"https://unpkg.com/pdfjs-dist@2.0.943/cmaps/" | |
limit | 默认0 | 限制pdf加载最大页数 | |
logo | {src:"pdfh5.png",x:10,y:10,width:40,height:40}src水印图片路径(建议使用png透明图片),width水印宽度,height水印高度,以每页pdf左上角为0点,x、y为偏移值。 默认false | 给每页pdf添加水印logo(canvas模式下使用) | |
goto | 默认0 | 加载pdf跳转到第几页 | |
textLayer | true、false, 默认false | 是否开启textLayer,可以复制文本(canvas模式下使用)【处于测试阶段,位置偏移严重】 | |
background | {color:"#fff",image:"url('pdfh5.png')",repeat:"no-repeat",position:"left top",size:"40px 40px"},和css的background属性语法相同,默认false | 是否开启背景图模式 |
- 以下属性可选
参数名称 | 类型 | 取值 | 作用 |
---|---|---|---|
httpHeaders | 默认空 | 设置httpHeaders信息 | |
withCredentials | 默认false | 是否使用cookie或授权标头之类的凭据发出跨站点访问 | |
password | 默认空 | 用于访问有密码的PDF | |
stopAtErrors | 默认false | 当无法成功解析关联的PDF数据时,停止解析 | |
disableFontFace | 默认false | 默认情况下,字体会转换为OpenType字体,并通过字体规则来加载。如果禁用,字体将使用内置的字体渲染器渲染。 | |
disableRange | 默认false | 禁用范围请求加载PDF文件。启用后,如果服务器支持部分内容请求,则将以块的形式获取PDF。 | |
disableStream | 默认false | 禁用流式传输PDF文件数据。默认情况下,PDF.js尝试加载成块的PDF。 | |
disableAutoFetch | 默认false | 禁用PDF文件数据的预取。启用范围请求后,即使不需要显示当前页面,PDF.js也会自动继续获取更多数据。默认值为“ false”。注意:还必须禁用流传输disableStream |
pdf文件流请求示例(以jq ajax为例)
$.ajax({url: "https://www.gjtool.cn/pdfh5/git.pdf", //假设这是pdf文件流的请求接口type: "get",mimeType: 'text/plain; charset=x-user-defined',//jq ajax请求文件流的方式success: function (data) {var pdfh5 = new Pdfh5('#demo', {data: data});}
});
$.ajax({url: "https://www.gjtool.cn/pdfh5/git.pdf", //假设这是pdf文件流的请求接口type: "get",mimeType: 'text/plain; charset=x-user-defined',//jq ajax请求文件流的方式success: function (data) {var rawLength = data.length;var array = new Uint8Array(new ArrayBuffer(rawLength));for (i = 0; i < rawLength; i++) {array[i] = data.charCodeAt(i) & 0xff;}var pdfh5 = new Pdfh5('#demo', {data: array});}
});
$.ajax({url: "https://www.gjtool.cn/pdfh5/git.pdf", //假设这是pdf文件流的请求接口type: "get",mimeType: 'text/plain; charset=x-user-defined',//jq ajax请求文件流的方式success: function (data) {var rawLength = data.length;var array = [];for (i = 0; i < rawLength; i++) {array.push(data.charCodeAt(i) & 0xff);}var pdfh5 = new Pdfh5('#demo', {data: array});}
});
- axios示例
axios.get("https://www.gjtool.cn/pdfh5/git.pdf",{responseType:"arraybuffer"
}).then(res=>{this.pdfh5 = new Pdfh5('#demo', {data: res.data});
})
methods 方法列表
- 示例: 是否允许pdf滚动
pdfh5.scrollEnable(true) //允许pdf滚动
pdfh5.scrollEnable(false) //不允许pdf滚动
参数名称 | 类型 | 取值 | 作用 |
---|---|---|---|
scrollEnable | true、false, 默认true | 是否允许pdf滚动(需要在pdf加载完成后使用) | |
zoomEnable | true、false, 默认true | 是否允许pdf手势缩放(需要在pdf加载完成后使用) | |
show | 带一个回调函数 | pdfh5显示 | |
hide | 带一个回调函数 | pdfh5隐藏 | |
reset | 带一个回调函数 | pdfh5还原 | |
destroy | 带一个回调函数 | pdfh5销毁 | |
on | {String, Function} | String:监听的事件名,Function:监听的事件回调 | on方法监听所有事件 |
goto | } | Number:要跳转的pdf页数 | pdf跳转到第几页(pdf加载完成后使用) |
on方法监听所有事件-事件名列表
- 示例: 监听pdf准备开始渲染,此时可以拿到pdf总页数
pdfh5.on("ready", function () {console.log("总页数:" + this.totalNum)
})
参数名称 | 回调 | 作用 |
---|---|---|
init | 监听pdfh5开始初始化 | |
ready | 监听pdf准备开始渲染,此时可以拿到pdf总页数 | |
error | {Function(msg,time))} | 监听加载失败,msg信息,time耗时 |
success | {Function(msg,time))} | 监听pdf渲染成功,msg信息,time耗时 |
complete | {Function(status, msg, time)} | 监听pdf加载完成事件,加载失败、渲染成功都会触发。status有两种状态success和error |
render | {Function(currentNum, time, currentPageDom)} | 监听pdf渲染过程,currentPageDom当前加载的pdf的dom,currentNum当前加载的pdf页数, |
zoom | {Function(scale)} | 监听pdf缩放,scale缩放比例 |
scroll | {Function(scrollTop)} | 监听pdf滚动,scrollTop滚动条高度 |
backTop | 监听回到顶部按钮的点击事件回调 | |
zoomEnable | {Function(flag)} | 监听允许缩放,flag:true,false |
scrollEnable | {Function(flag)} | 监听允许滚动,flag:true,false |
show | 监听pdfh5显示 | |
hide | 监听pdfh5隐藏 | |
reset | 监听pdfh5还原 | |
destroy | 监听pdfh5销毁 |
扫下面小程序码,
pdfh5.js 基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件。相关推荐
- Vue项目H5移动端在线预览PDF文件
1.安装pdfh5插件 npm install pdfh5 --save 2.使用 <template><div id="app"><div id=& ...
- web项目移动端在线预览(word格式转html)
最近项目中遇到一个需求,需要在手机端实现对pc端上传的附件进行在线预览,整理了一下实现方案,仅供参考 首先是最常见的我word在线预览,这里使用的是com.aspose.words这个jar包(其他格 ...
- Vue.js – 基于 MVVM 实现交互式的 Web 界面
Vue.js 是用于构建交互式的 Web 界面的库.它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API.从技术上讲, Vue.js 集中在 MVVM 模式上的视图模型层,并 ...
- 手机端html5展示pdf,pdf.js移动端展示预览打开pdf-pdfh5.js
pdf.js移动端展示预览打开pdf-pdfh5.js 本插件基于pdf.js和jQuery,可手势捏合缩放,支持懒加载(即分段加载). 2019.07.18更新:增加npm install pdfh ...
- HTML生成PDF、web打印动态分页、预览。内容满了,自动换页、移动端兼容 bookjs-eazy
WEB打印,HTML转PDF工具.bookjs-eazy 仓库地址: GITEE | GITHUB 主要解决,HTML生成PDF,分页可控的问题 依赖js库:polyfill.jquery.lodas ...
- (转)基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作...
http://www.cnblogs.com/wuhuacong/p/5147368.html 在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这 ...
- js实现移动端图片预览:手势缩放, 手势拖动,双击放大...
原文:js实现移动端图片预览:手势缩放, 手势拖动,双击放大... 前言 本文将介绍如何通过js实现移动端图片预览,包括图片的 预览模式,手势缩放,手势拖动,双击放大等基本功能: 扫码查看示例效果: ...
- 移动端图片预览插件-fly-zomm-img.min.js
移动端图片预览插件,一个JQ的插件,支持手势放大缩小:有点小bug,不过感觉是可以接受的: 插件的地址:http://www.jq22.com/jquery-info15466 那里有具体的说明,但是 ...
- 手机端与PC端在线预览PDF
问题场景 公司需要把出具的报告在PC端在线预览,之前一直用embed标签解决,效果很好.产品提出在手机端(微信链接或者手机浏览器)也要在线预览,尴尬的是安卓端提示的是下载,IOS端只能看不能滑动.经一 ...
最新文章
- 开源一个SpringBoot + Mybatis + Vue的代码生成器
- ROS学习(八):ROS URDF-transmission
- 使用jpcap获取网卡硬件
- android phonegap 服务器ip配置,android + phoneGap 环境搭建
- Hibernate注解(二)之映射简单的属性
- ASCII编码/Unicode编码
- Python练习-从小就背不下来的99乘法表
- 图文详解如何搭建Windows的Android C++开发环境
- 【读书笔记】--- 《码出高效:java开发手册》
- 安装torch_sparse失败解决方法
- 如何编程在一个文本文件中每隔n个字符插入一个换行符c语言实现,C语言程序设计A形成性作业及答案(31页)-原创力文档...
- 别动我的代码!聊聊那些代码保护的艺术
- 创新的垃圾处理模式——赛普利
- [root@py ~]# watch -n 1 ifconfig 求解释
- 【2022年】浙江省专升本数学全面总结-(空间解析几何与向量代数)
- BCNF范式的判断和分解
- 如何设置无线网络中计算机的ip,无线网络设置方法【详细步骤】
- 知识图谱中三元组抽取
- matlab 股票 小波,小波分析 + 支持向量机(SVM)预测股票涨跌幅的实现
- STL mismatch算法