Gathering detailed insights and metrics for pdfh5
Gathering detailed insights and metrics for pdfh5
Installations
npm install pdfh5Developer Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
18.20.8
NPM Version
10.8.2
Score
76.3
Supply Chain
99
Quality
85.9
Maintenance
100
Vulnerability
99.6
License
Releases
14
Languages
5
JavaScript
CSS
HTML
Vue
TypeScript
JavaScript (64.1%)
CSS (21.73%)
HTML (10.79%)
Vue (3.23%)
TypeScript (0.14%)
Developer
Download Statistics
Total Downloads
601,963
Last Day
39
Last Week
586
Last Month
3,234
Last Year
182,913
GitHub Statistics
MIT License
1,041 Stars
363 Commits
246 Forks
15 Watchers
4 Branches
4 Contributors
Updated on Jul 04, 2025
Bundle Size
1.71 MB
Minified
444.21 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
2.0.5
Package Id
pdfh5@2.0.5
Unpacked Size
2.84 MB
Size
1.05 MB
File Count
16
NPM Version
10.8.2
Node Version
18.20.8
Published on
May 18, 2025
Total Downloads
Cumulative downloads
Total Downloads
601,963
Last Day
34.5%
39
Compared to previous day
Last Week
-14%
586
Compared to previous week
Last Month
-35.7%
3,234
Compared to previous month
Last Year
8.6%
182,913
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
pdfh5.js
1、有问题可以加Q群咨询，技术交流群，也可以探讨技术，另有微信群可以问群主拉入微信群
2、如果有报错，请复制example运行，然后对照相关文件，以及package.json，缺什么补什么
3、如果有某些字体显示不了，那可能是pdf.js缺少相关字库解析，可以尝试更改cMapUrl，建议去官方地址找版本
4、如果IOS下pdf显示不了，安卓却可以，可能是pdf精度过高导致，Safari浏览器canvas渲染绘制图片宽高不能超过16777216，超过会不显示
react、vue均可使用
example/test是vue使用示例
example/vue3demo是vue3使用示例
example/vite4vue3是vite4+vue3+ts使用示例
example/react-test是react使用示例
更新信息
- 2025.05.18 更新： 修复调用updateFile方法后，原先监听事件失效的问题。修复scroll事件监听最后一页的问题。
- 2025.05.13 更新： 新增方法updateFile更新pdf，修复destroy报错。
- 2025.05.09 更新： 优化放大后的手势水平滚动。
- 2025.05.07 更新： 移除jQuery依赖，img渲染还原成canvas渲染，合并textLayer的PR，所有示例同步更新，修复部分bugs。
pdfh5在线预览 （建议使用谷歌浏览器F12手机模式打开预览）
快速使用（有两种方式）
一、script标签引入方式
- 1.创建div
1<div id="demo"></div>
- 2.依次引入js（需引用本项目的js,不要引用官方的pdf.js,jquery可以引用其它版的）
1<script src="js/pdf.js" type="text/javascript" charset="utf-8"></script> 2<script src="js/pdf.worker.js" type="text/javascript" charset="utf-8"></script> 3<script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
- 3.实例化
1var pdfh5 = new Pdfh5(document.querySelector("#demo"), { 2 pdfurl: "./default.pdf" 3});
二、npm安装方式（适应于vue）, react使用方法类似vue（example/react-test是react使用示例）
- 1.安装
1npm install pdfh5
- 2.使用
1<template> 2 <div id="app"> 3 <div id="demo"></div> 4 </div> 5</template> 6<script> 7 import Pdfh5 from "pdfh5"; 8 export default { 9 name: 'App', 10 data() { 11 return { 12 pdfh5: null 13 }; 14 }, 15 mounted() { 16 //实例化 17 this.pdfh5 = new Pdfh5(document.querySelector("#demo"), { 18 pdfurl: "../../static/test.pdf", 19 // cMapUrl:"https://unpkg.com/pdfjs-dist@3.8.162/cmaps/", 20 // responseType: "blob" // blob arraybuffer 21 }); 22 //监听完成事件 23 this.pdfh5.on("complete", function (status, msg, time) { 24 console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum) 25 //禁止手势缩放 26 this.pdfh5.zoomEnable(false); 27 }) 28 } 29 } 30</script> 31 32<style> 33 *{ 34 padding: 0; 35 margin: 0; 36 } 37 html,body,#app { 38 width: 100%; 39 height: 100%; 40 } 41</style>
API接口方法
实例化
- pdfh5实例化的时候传两个参数，selector选择器，options配置项参数，会返回一个pdfh5实例对象，可以用来操作pdf，监听相关事件
1var pdfh5 = new Pdfh5(selector, options);
| 参数名称 | 类型 | 取值 | 是否必须 | 作用 |
|---|---|---|---|---|
| selector | HTMLElement | - | √ | pdfh5的容器,html DOM元素对象 |
| options | Object | - | × | pdfh5的配置项参数 |
options配置项参数列表
- 示例： 配置项参数 pdfurl
1var pdfh5 = new Pdfh5(document.querySelector("#demo"), { 2 pdfurl: "./default.pdf" 3});
| 参数名称 | 类型 | 取值 | 作用 |
|---|---|---|---|
| pdfurl | String | - | pdf地址 |
| responseType | String | blob 、 arraybuffer 默认 blob | 请求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 | 是否显示右下角回到顶部按钮 |
| maxZoom | Number | 最大倍数3 | 手势缩放最大倍数 |
| scale | Number | 最大比例5，默认1.5 | pdf渲染的比例 |
| scrollEnable | Boolean | true、false， 默认true | 是否允许pdf滚动 |
| zoomEnable | Boolean | true、false， 默认true | 是否允许pdf手势缩放 |
| cMapUrl | String | " | 解析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 | 是否开启背景图模式 |
pdf请求示例
1、文件地址
1new Pdfh5(document.querySelector("#demo"), { 2 pdfurl: "git.pdf", 3 // responseType: "blob" // blob arraybuffer 4});
2、pdf文件流或者buffer已经得到，如何渲染
1 new Pdfh5(document.querySelector("#demo"), { 2 data: blob, //blob arraybuffer 3 });
methods 方法列表
- 示例： 是否允许pdf滚动
1pdfh5.scrollEnable(true) //允许pdf滚动 2pdfh5.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 |
| updateFile | options | options.pdfurl：要更新的pdf地址，options.data：要更新的pdf文件流（blob 、 arraybuffer ） | 更新pdf |
on方法监听所有事件-事件名列表
- 示例： 监听pdf准备开始渲染，此时可以拿到pdf总页数
1pdfh5.on("ready", function () { 2 console.log("总页数：" + this.totalNum) 3})
| 事件名 | 回调 | 作用 |
|---|---|---|
| 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 ￥6.66
- 靓仔城 ￥6.67
- 南蓝 ￥8.80
- 我是太阳 ￥29.99
- *小波 ￥1.00
- *鑫 ¥9.99
- *手 ¥9.99
- *勇 ￥19.99
- *爷 ¥5.00
- *超 ¥20.00
- 3*Y ¥5.00
- *阳 ¥5.00
- **雄 ¥5.00
- A*r ¥1.23
- *客 ¥5.00
- *运 ¥66.66
- *辰 ¥30.00
- *黎 ¥6.66+¥5.00
- **福 ¥6.66
- *🏀 ¥6.66+¥1.00
- *阳 ¥10.00
- 自闭中 ¥16.66+¥16.00
- *焕 ¥6.66
- *人 ¥5.00
- *。 ¥5.20
- 半*) ¥5.00
- *1 ¥15.00
- *蕾 ¥16.66+¥8.80
- *军 ¥10.00
- **强 ¥58.88
- E*y ¥6.60
- J*u ¥13.00
- A*a ¥50.00
- *东 ¥8.80
- j*y ¥9.99
- *宇 ¥6.66
- *涛 ￥1.00
- *. ￥10.00
- *☺ ￥6.66
- *霸 ￥6.66
- a*r ￥20.00
- 木槿(**耀) ￥50.00
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
11 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 9
Reason
Found 2/18 approved changesets -- score normalized to 1
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 14 are checked with a SAST tool
Reason
64 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-cwx2-736x-mf6w
- Warn: Project is vulnerable to: GHSA-v39p-96qg-c8rf
- Warn: Project is vulnerable to: GHSA-8v63-cqqc-6r2c
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-c9g6-9335-x697
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
3
/10
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More