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使用示例
更新信息
.07.30 更新： 更新jquery版本至jquery-2.1.1.min.jspdfh5在线预览 （建议使用谷歌浏览器F12手机模式打开预览）
/pdfh5/pdf.html?file=/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);
options配置项参数列表
示例：配置项参数 pdfurlvar pdfh5 = new Pdfh5('#demo', {pdfurl: "./default.pdf"});
以下属性可选
pdf文件流请求示例（以jq ajax为例）
$.ajax({url: "/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: "/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: "/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("/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滚动
on方法监听所有事件-事件名列表
示例：监听pdf准备开始渲染，此时可以拿到pdf总页数pdfh5.on("ready", function () {console.log("总页数：" + this.totalNum)})
