想要实现H5手机端在线浏览pdf文件功能，了解一下pdfh5.js插件

前端  /  管理员 发布于 3年前   6804

dfh5.js是基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件

在H5手机移动端在线浏览pdf文件，同时支持手指缩放功能插件，这里为网友推荐一下。

pdfh5.js插件。支持js和vue模块化引入方式

演示：https://www.gjtool.cn/pdfh5/pdf.html

git地址：https://gitee.com/pjjg/pdfh5

script标签引入方式（需下载本项目文件夹css/pdfh5.css、js内所有文件）

<link rel="stylesheet" href="css/pdfh5.css" />
<div id="demo"></div>
<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-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>

实例化

var pdfh5 = new Pdfh5('#demo', {
  pdfurl: "./1.pdf"
});

npm安装方式（适应于vue）

npm install pdfh5

vue使用

<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>

API接口方法

注意： pdf路径地址用相对路径加载速度最快，网络地址比较慢，本地绝对路径地址不能加载。

实例化

pdfh5实例化的时候传两个参数，

selector选择器，

options配置项参数，options可以不填写，会自动获取浏览器地址栏？file=后面的地址。

会返回一个pdfh5实例对象，可以用来操作pdf，监听相关事件

var pdfh5 = new Pdfh5(selector, options);

参数名称      类型               取值      是否必须        作用

selector {String}    -    √       pdfh5的容器选择器    
options  {Object}    -    ×       pdfh5的配置项参数 

   

options配置项参数列表

示例： 配置项参数 lazy:true 开启懒加载，默认是false,不开启懒加载

var pdfh5 = new Pdfh5('#demo', {
pdfurl: "./default.pdf",
lazy:true 
});

来张效果图：

完