二、npm安装方式(适应于vue), react使用方法类似vue(example/react-test是react使用示例)
npm install pdfh5
<template>
<div id="app">
<div id="demo"></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);
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:"