npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

pdf_h5_c

v1.0.3

Published

引入新版pdfjs

Downloads

4

Readme

pdfh5.js

npm version npm downloads npm downloads MIT GitHub issues GitHub stars GitHub forks

react、vue 均可使用

example/test是 vue 使用示例

example/vue3demo是 vue3 使用示例

example/vite4vue3是 vite4+vue3+ts 使用示例

example/react-test是 react 使用示例

pdfh5.js示例

更新信息

  • 2024.02.29 更新: 修复部分 bugs。

pdfh5 在线预览 (建议使用谷歌浏览器 F12 手机模式打开预览)

快速使用(有两种方式)

一、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",
		// cMapUrl:"https://unpkg.com/[email protected]/cmaps/",
		// responseType: "blob" // blob arraybuffer
	  });
	  //监听完成事件
	  this.pdfh5.on("complete", function (status, msg, time) {
		console.log("状态:" + status + ",信息:" + msg + ",耗时:" + time + "毫秒,总页数:" + this.totalNum)
		//禁止手势缩放
		this.pdfh5.zoomEnable(false);
	  })
	}
  }
</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 | String | - | √ | pdfh5 的容器选择器 | | options | Object | - | × | pdfh5 的配置项参数 |

options 配置项参数列表

  • 示例: 配置项参数 pdfurl
var pdfh5 = new Pdfh5("#demo", {
  pdfurl: "./default.pdf",
});

| 参数名称 | 类型 | 取值 | 作用 | | :----------: | :----------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | 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/[email protected]/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 请求示例

new Pdfh5("#demo", {
  pdfurl: "git.pdf",
  // responseType: "blob" // blob arraybuffer
});
  1. pdf 文件流或者 buffer 已经得到,如何渲染
new Pdfh5("#demo", {
  data: blob, //blob arraybuffer
});

methods 方法列表

  • 示例: 是否允许 pdf 滚动
pdfh5.scrollEnable(true); //允许pdf滚动
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 |

on 方法监听所有事件-事件名列表

  • 示例: 监听 pdf 准备开始渲染,此时可以拿到 pdf 总页数
pdfh5.on("ready", function () {
  console.log("总页数:" + this.totalNum);
});

| 事件名 | 回调 | 作用 | | :----------: | :----------------------------------------: | :-------------------------------------------------------------------------------------: | | 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 销毁 |