From d286b4e9b720d40b55d3c2939ab176b1a59681fe Mon Sep 17 00:00:00 2001 From: gjTool <305250069@qq.com> Date: Fri, 4 Mar 2022 09:47:04 +0800 Subject: [PATCH] Update README.md --- README.md | 128 ++++++++++++++++++++++++------------------------------ 1 file changed, 57 insertions(+), 71 deletions(-) diff --git a/README.md b/README.md index 1c2b288..b49de08 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,11 @@ # pdfh5.js [![npm version](https://img.shields.io/npm/v/pdfh5.svg)](https://www.npmjs.com/package/pdfh5) [![npm downloads](https://img.shields.io/npm/dt/pdfh5.svg)](https://www.npmjs.com/package/pdfh5) [![npm downloads](https://img.shields.io/npm/dw/pdfh5.svg)](https://www.npmjs.com/package/pdfh5) [![MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/gjTool/pdfh5/blob/master/LICENSE) [![GitHub issues](https://img.shields.io/github/issues/gjTool/pdfh5.svg)](https://github.com/gjTool/pdfh5/issues) [![GitHub stars](https://img.shields.io/github/stars/gjTool/pdfh5.svg?style=social)](https://github.com/gjTool/pdfh5/stargazers) [![GitHub forks](https://img.shields.io/github/forks/gjTool/pdfh5.svg?style=social)](https://github.com/gjTool/pdfh5/network/members) -**pdfh5.js 基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件。** +**由于精力有限，本插件暂时不会更新了，如果有问题可以到博客留言并留下联系方式，抽空回复** + + + -- **注意：本地绝对路径地址不能加载，跨域问题用代理或者服务端解决。** -- **svg模式渲染存在缺陷，只能渲染普通pdf，带签名、印章的可能会渲染不全，报错，pdf.js官方目前没有给出解决方案** -- **canvas模式本质是图片，默认进去的时候，图片在手机端被缩放，不是原分辨率，所以失真模糊。所以需要放大查看pdf** - [pdfh5博客主页](https://www.gjtool.cn/) @@ -13,11 +13,8 @@ - [pdfh5项目gitee地址](https://gitee.com/gjTool/pdfh5) -- **注意：github经常被墙，需要看文档的可以去gitee上看** - -### **QQ交流群：196422291** -#### react、vue2.x均可使用，vue3.x暂时没有适配 +#### react、vue均可使用 #### [example/test](https://github.com/gjTool/pdfh5/tree/master/example/test)是vue使用示例，vue示例展示axios调用接口展示pdf，跨域代理，相对路径等方法 #### [example/react-test](https://github.com/gjTool/pdfh5/tree/master/example/react-test)是react使用示例 @@ -25,7 +22,7 @@ ## 更新信息 -- 2021.12.31 更新： 更新jQuery版本 +- 2021.10.08 更新： 修复一些bug，新增下载pdf方法pdfh5.download("xx.pdf",function(){}) ### pdfh5在线预览 （建议使用谷歌浏览器F12手机模式打开预览） @@ -131,8 +128,8 @@ var pdfh5 = new Pdfh5(selector, options); ``` |参数名称 |类型 |取值 |是否必须 |作用 | |:---: |:---: |:---: |:---: |:---: | -|selector | {String} | - | √ |pdfh5的容器选择器 | -|options | {Object} | - | × |pdfh5的配置项参数 | +|selector | String | - | √ |pdfh5的容器选择器 | +|options | Object | - | × |pdfh5的配置项参数 | ## options配置项参数列表 @@ -146,36 +143,36 @@ var pdfh5 = new Pdfh5('#demo', { |参数名称 |类型 |取值 |作用 | |:---: |:---: |:---: |:---: | -|pdfurl | {String} | - |pdf地址 | -|URIenable | {Boolean} |true、false， 默认false | true开启地址栏file参数 | -|data | {Array(arraybuffer)} | - |pdf文件流 ，与pdfurl二选一(二进制PDF数据。使用类型化数组（Uint8Array）可以提高内存使用率。如果PDF数据是BASE64编码的，请先使用atob（）将其转换为二进制字符串。) | -|renderType | {String} |"canvas"、"svg"，默认"canvas" |pdf渲染模式 | -|pageNum | {Boolean} |true、false， 默认true |是否显示左上角页码 | -|backTop | {Boolean} |true、false， 默认true |是否显示右下角回到顶部按钮 | -|lazy | {Boolean} |true、false， 默认false |是否开启懒加载(实际是延迟加载图片，即屏幕滚动到pdf位置时加载图片) | -|maxZoom | {Number} |最大倍数3 |手势缩放最大倍数 | -|scale | {Number} |最大比例5，默认1.5 |pdf渲染的比例 | -|scrollEnable | {Boolean} |true、false， 默认true |是否允许pdf滚动 | -|zoomEnable | {Boolean} |true、false， 默认true |是否允许pdf手势缩放 | -|cMapUrl | {String} | 默认"https://www.gjtool.cn/cmaps/" |解析pdf时，特殊情况下显示完整字体的cmaps文件夹路径，例如 cMapUrl:"https://unpkg.com/pdfjs-dist@2.0.943/cmaps/" | -|limit | {Number} | 默认0 |限制pdf加载最大页数 | -|logo | {Object} |{src:"pdfh5.png",x:10,y:10,width:40,height:40}src水印图片路径（建议使用png透明图片），width水印宽度，height水印高度，以每页pdf左上角为0点，x、y为偏移值。 默认false|给每页pdf添加水印logo（canvas模式下使用） | -|goto | {Number} | 默认0 |加载pdf跳转到第几页 | -|textLayer | {Boolean} | true、false， 默认false |是否开启textLayer，可以复制文本（canvas模式下使用）【处于测试阶段，位置偏移严重】 | -|background | {Object} | {color:"#fff",image:"url('pdfh5.png')",repeat:"no-repeat",position:"left top",size:"40px 40px"}，和css的background属性语法相同，默认false |是否开启背景图模式 | +|pdfurl | String | - |pdf地址 | +|URIenable | Boolean |true、false， 默认false | true开启地址栏file参数 | +|data | Array(arraybuffer) | - |pdf文件流 ，与pdfurl二选一(二进制PDF数据。使用类型化数组（Uint8Array）可以提高内存使用率。如果PDF数据是BASE64编码的，请先使用atob（）将其转换为二进制字符串。) | +|renderType | String |"canvas"、"svg"，默认"canvas" |pdf渲染模式 | +|pageNum | Boolean |true、false， 默认true |是否显示左上角页码 | +|backTop | Boolean |true、false， 默认true |是否显示右下角回到顶部按钮 | +|lazy | Boolean |true、false， 默认false |是否开启懒加载(实际是延迟加载图片，即屏幕滚动到pdf位置时加载图片) | +|maxZoom | Number |最大倍数3 |手势缩放最大倍数 | +|scale | Number |最大比例5，默认1.5 |pdf渲染的比例 | +|scrollEnable | Boolean |true、false， 默认true |是否允许pdf滚动 | +|zoomEnable | Boolean |true、false， 默认true |是否允许pdf手势缩放 | +|cMapUrl | String | 默认"https://www.gjtool.cn/cmaps/" |解析pdf时，特殊情况下显示完整字体的cmaps文件夹路径，例如 cMapUrl:"https://unpkg.com/pdfjs-dist@2.0.943/cmaps/" | +|limit | Number | 默认0 |限制pdf加载最大页数 | +|logo | Object |{src:"pdfh5.png",x:10,y:10,width:40,height:40}src水印图片路径（建议使用png透明图片），width水印宽度，height水印高度，以每页pdf左上角为0点，x、y为偏移值。 默认false|给每页pdf添加水印logo（canvas模式下使用） | +|goto | Number | 默认0 |加载pdf跳转到第几页 | +|textLayer | Boolean | true、false， 默认false |是否开启textLayer，可以复制文本（canvas模式下使用）【处于测试阶段，位置偏移严重】 | +|background | Object | {color:"#fff",image:"url('pdfh5.png')",repeat:"no-repeat",position:"left top",size:"40px 40px"}，和css的background属性语法相同，默认false |是否开启背景图模式 | - 以下属性可选 |参数名称 |类型 |取值 |作用 | |:---: |:---: |:---: |:---: | -|httpHeaders | {Object} | 默认空 |设置httpHeaders信息 | -|withCredentials | {Boolean} | 默认false |是否使用cookie或授权标头之类的凭据发出跨站点访问 | -|password | {String} | 默认空 |用于访问有密码的PDF | -|stopAtErrors | {Boolean} | 默认false |当无法成功解析关联的PDF数据时，停止解析 | -|disableFontFace | {Boolean} | 默认false |默认情况下，字体会转换为OpenType字体，并通过字体规则来加载。如果禁用，字体将使用内置的字体渲染器渲染。 | -|disableRange | {Boolean} | 默认false |禁用范围请求加载PDF文件。启用后，如果服务器支持部分内容请求，则将以块的形式获取PDF。 | -|disableStream | {Boolean} | 默认false |禁用流式传输PDF文件数据。默认情况下，PDF.js尝试加载成块的PDF。 | -|disableAutoFetch | {Boolean} | 默认false |禁用PDF文件数据的预取。启用范围请求后，即使不需要显示当前页面，PDF.js也会自动继续获取更多数据。默认值为“ false”。注意：还必须禁用流传输disableStream | +|httpHeaders | Object | 默认空 |设置httpHeaders信息 | +|withCredentials | Boolean | 默认false |是否使用cookie或授权标头之类的凭据发出跨站点访问 | +|password | String | 默认空 |用于访问有密码的PDF | +|stopAtErrors | Boolean | 默认false |当无法成功解析关联的PDF数据时，停止解析 | +|disableFontFace | Boolean | 默认false |默认情况下，字体会转换为OpenType字体，并通过字体规则来加载。如果禁用，字体将使用内置的字体渲染器渲染。 | +|disableRange | Boolean | 默认false |禁用范围请求加载PDF文件。启用后，如果服务器支持部分内容请求，则将以块的形式获取PDF。 | +|disableStream | Boolean | 默认false |禁用流式传输PDF文件数据。默认情况下，PDF.js尝试加载成块的PDF。 | +|disableAutoFetch | Boolean | 默认false |禁用PDF文件数据的预取。启用范围请求后，即使不需要显示当前页面，PDF.js也会自动继续获取更多数据。默认值为“ false”。注意：还必须禁用流传输disableStream | ## pdf文件流请求示例（以jq ajax为例） 1. @@ -256,15 +253,15 @@ pdfh5.scrollEnable(false) //不允许pdf滚动 |方法名 |传参 |传参取值 |作用 | |:---: |:---: |:---: |:---: | -|scrollEnable | {Boolean} |true、false， 默认true |是否允许pdf滚动(需要在pdf加载完成后使用) | -|zoomEnable | {Boolean} |true、false， 默认true |是否允许pdf手势缩放(需要在pdf加载完成后使用) | -|show | {Function} |带一个回调函数 |pdfh5显示 | -|hide | {Function} |带一个回调函数 |pdfh5隐藏 | -|reset | {Function} |带一个回调函数 |pdfh5还原 | -|destroy | {Function} |带一个回调函数 |pdfh5销毁 | -|on | {String, Function}|String：监听的事件名，Function：监听的事件回调 |on方法监听所有事件 | -|goto | {Number} |Number:要跳转的pdf页数 |pdf跳转到第几页（pdf加载完成后使用） | -|download | {String, Function}|String：下载pdf的名称，默认download.pdf，Function：下载完成后的回调|下载pdf | +|scrollEnable | Boolean |true、false， 默认true |是否允许pdf滚动(需要在pdf加载完成后使用) | +|zoomEnable | Boolean |true、false， 默认true |是否允许pdf手势缩放(需要在pdf加载完成后使用) | +|show | Function |带一个回调函数 |pdfh5显示 | +|hide | Function |带一个回调函数 |pdfh5隐藏 | +|reset | Function |带一个回调函数 |pdfh5还原 | +|destroy | Function |带一个回调函数 |pdfh5销毁 | +|on | (String, Function)|String：监听的事件名，Function：监听的事件回调 |on方法监听所有事件 | +|goto | Number |Number:要跳转的pdf页数 |pdf跳转到第几页（pdf加载完成后使用） | +|download | (String, Function)|String：下载pdf的名称，默认download.pdf，Function：下载完成后的回调|下载pdf | ## on方法监听所有事件-事件名列表 @@ -277,32 +274,21 @@ pdfh5.on("ready", function () { ``` |事件名 |回调 |作用 | |:---: |:---: |:---: | -|init | {Function} |监听pdfh5开始初始化 | -|ready | {Function} |监听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,currentNum)} | 监听pdf滚动，scrollTop滚动条高度,currentNum当前页码 | -|backTop | {Function} | 监听回到顶部按钮的点击事件回调 | -|zoomEnable | {Function(flag)} | 监听允许缩放，flag：true，false | -|scrollEnable | {Function(flag)} | 监听允许滚动，flag：true，false | -|show | {Function} | 监听pdfh5显示 | -|hide | {Function} | 监听pdfh5隐藏 | -|reset | {Function} | 监听pdfh5还原 | -|destroy | {Function} | 监听pdfh5销毁 | -### **QQ交流群：196422291** - - -## 打赏赞助作者，请他喝一杯咖啡： -![支付宝二维码](https://www.gjtool.cn/download/zfb.jpg) - ![微信二维码](https://www.gjtool.cn/download/wx.jpg?1111) - -- 感谢打赏！请打赏的童鞋留下github、QQ、微信 。然后，我会对打赏过的童鞋的问题及时响应。（当然是在我不忙的时候啦） -- 相比打赏，点star还要重要些，请各位走过路过帮忙点下star，万分感谢 - -### **QQ交流群：196422291** +|init | Function |监听pdfh5开始初始化 | +|ready | Function |监听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,currentNum) | 监听pdf滚动，scrollTop滚动条高度,currentNum当前页码 | +|backTop | Function | 监听回到顶部按钮的点击事件回调 | +|zoomEnable | Function(flag) | 监听允许缩放，flag：true，false | +|scrollEnable | Function(flag) | 监听允许滚动，flag：true，false | +|show | Function | 监听pdfh5显示 | +|hide | Function | 监听pdfh5隐藏 | +|reset | Function | 监听pdfh5还原 | +|destroy | Function | 监听pdfh5销毁 | ## 打赏榜单 - [JayLin](https://github.com/110117ab) ￥6.66