1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
| <template>
| <view class="pdf-page">
| <view class="pdf-wrap" :style="{'height':viewHeight}">
| <view ref="pdfRef" id="pdfView"></view>
| </view>
| <view v-if="showBottom" class="pdf-btn-group">
| <slot>
| <button class="btn-readed" size="mini" @click="handleComplete"
| :disabled="btnDisabled">{{showTimer ? countTimer<=1 ? '':'('+countTimer+'s)':''}}我已阅读</button>
| </slot>
| </view>
| </view>
| </template>
|
| <script>
| import Pdfh5 from "pdfh5";
| import "pdfh5/css/pdfh5.css";
| export default {
| name: "u-pdf",
| props: {
| url: {
| type: String,
| require: true
| },
| viewHeight: {
| type: String,
| default: "100%"
| },
| showBottom: {
| type: Boolean,
| default: true
| },
| options: {
| type: Object,
| default: () => ({
| cMapUrl: "https://unpkg.com/pdfjs-dist@3.8.162/cmaps/",
| lazy: false,
| withCredentials: true,
| // pdfLoaded:false,
| renderType: "svg",
| maxZoom: 3, //手势缩放最大倍数 默认3
| scrollEnable: true, //是否允许pdf滚动
| zoomEnable: true //是否允许pdf手势缩放
| })
| },
| disabled:{
| type:Boolean,
| default:true
| },
| showTimer:Boolean
| },
| data() {
| return {
| totalNum: 0,
| pdfh5: undefined,
| countTimer:10,
| timer:undefined,
| btnDisabled:true
| }
| },
|
| watch:{
| disabled(n,o){
| this.btnDisabled = this.disabled
| },
| showTimer(n,o){
| console.log("showTimer ",n);
| if(this.showTimer){
| this.startCountDownTimer()
| }
| }
| },
|
| mounted() {
| this.$nextTick(() => {
| this.loadPdf()
| })
| },
|
| // onPageScroll(scroll) {
| // console.log(`onPageScroll ${scroll}`,scroll);
| // },
|
| // onReachBottom(scroll) {
| // console.log(`onReachBottom 滚动到底部`);
| // },
|
| methods: {
| handleComplete(){
| this.$emit("onClickReader")
| },
|
| startCountDownTimer(){
| this.timer= setInterval(()=>{
| if(this.countTimer<=1){
| this.btnDisabled=false
| clearInterval(this.timer)
| }else{
| this.countTimer--
| }
| },1000)
| },
|
| loadPdf() {
| if (!this.url) {
| console.error("pdf url is null ");
| return;
| }
| const opts = {
| pdfurl: this.url,
| ...this.options
| }
| console.log(opts);
| this.pdfh5 = new Pdfh5('#pdfView', opts);
| // 准备加载pdf
| this.pdfh5.on("ready", () => {
| this.$emit("ready")
| })
| //pdf 监听完成事件
| this.pdfh5.on("complete", (status, msg, time) => {
| console.log(`PDF complete status=${status}, msg =${msg}`);
| this.$emit("complete", { status, msg })
| });
| // pdf 滚动事件 Svg 方式不会执行此方法， 需要在page中监听 onReachBottom，onPageScroll
| this.pdfh5.on("scroll", (scrollTop, currentNum) => {
| console.log(`pdf scrollTop =${scrollTop} , currentNum =${currentNum}`);
| this.$emit("scroll", { scrollTop, currentNum })
| });
| }
| }
| }
| </script>
|
| <style scoped>
| @import 'pdfh5/css/pdfh5.css';
|
| .pdf-page {
| width: 100%;
| height: 100%;
| display: flex;
| flex-direction: column;
| align-items: center;
| }
|
| .pdf-wrap {
| width: 100%;
| flex: 1;
| }
|
| .pdf-btn-group {
| width: 100%;
| border-top: 2rpx solid #F8F9FC;
| height: 8%;
| position: fixed;
| bottom: -1rpx;
| z-index: 999;
| background: white;
| display: flex;
| align-items: center;
| justify-content: center;
| }
|
| .btn-readed {
| background: #4E70F6;
| color: #ffffff;
| font-size: 32rpx;
| }
| </style>
|
|
