vue 中PDF实现在线浏览,禁止下载,打印

需求:在线浏览pdf文件,并且禁止掉用户下载。

未测试

分析:普通的iframe、embed标签都只能实现在线浏览pdf的功能,无法禁止掉工具栏的下载打印功能。只能尝试使用插件,pdfobject.js这个插件可以实现功能,而且操作简单,但是兼容性不好,不兼容火狐、ie浏览器。于是替换成pdf.js

实现:因为不想在服务器放太多东西,所以引用pdf后的方法都是自己调用的api实现的。

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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
1.首先npm下载pdf.js            
 
npm isntall --save pdfjs-dist
 
2.created中引入pdf.js (刚开始使用import引入本地的pfd.js文件,谷歌浏览器没有问题。但是火狐无法正常显示) 
 
    let PDFJS = require('pdfjs-dist').PDFJS                         //PDF.JS必须require引进去才不会有兼容问题
 
    PDFJS.workerSrc = require('pdfjs-dist/build/pdf.worker.min');
 
3.页面布局pdf的样式和想要使用的功能 。这里是上一页,下一页,全屏功能
 
进入全屏
 
上一页
 
Page:/
 
下一页
 
 
 
4.一些方法。因为刚进页面的时候是固定的一块区域,还需要有全屏功能。于是按pdf的原来大小算出了比例,按比例计算的viewport。如果没有这个需求,可以直接定义viewport
 
data中定义的变量
 
wid:645,        //刚进入页面中的pdf容器的宽度
 
pdfDoc:null,//pdfjs 生成的对象     
 
pageNum:1,//     
 
pageRendering:false,
 
pageNumPending:null,
 
scale:null,//放大倍数     
 
page_num:0,//当前页数     
 
page_count:0,//总页数     
 
renderPage(num) {//渲染pdf 
 
 
 
letvm=this
 
this.pageRendering=true;
 
letcanvas=this.$refs.canvas// Using promise to fetch the page     
 
vm.pdfDoc.getPage(num).then(function(page) {
 
vm.scale=vm.wid/page.getViewport(1.0).width    //vm.wid是在data中定义的一个变量,最初设置的pdf的宽度
 
varviewport=page.getViewport(vm.scale);
 
 
 
// var viewport = page.getViewport(vm.scale);        //alert(vm.canvas.height)       
 
canvas.height=viewport.height;
 
canvas.width=viewport.width;// Render PDF page into canvas context
 
 
 
console.log(vm.count)
 
varrenderContext= {
 
canvasContext:vm.ctx,
 
viewport:viewport
 
                };       
 
varrenderTask=page.render(renderContext);// Wait for rendering to finish       
 
renderTask.promise.then(function() {
 
vm.pageRendering=false;
 
if(vm.pageNumPending!==null) {// New page rendering is pending         
 
this.renderPage(vm.pageNumPending);
 
vm.pageNumPending=null;
 
                    }       
 
                });     
 
            });     
 
vm.page_num=vm.pageNum;
 
        },
 
  上一页:
 
prevpage() {//上一页     
 
letvm=this
 
if(vm.pageNum<=1) {
 
return;
 
            }     
 
vm.pageNum--;
 
this.queueRenderPage(vm.pageNum);
 
},  
 
下一页
 
nextpage() {//下一页     
 
letvm=this
 
if(vm.pageNum>=vm.page_count) {
 
return;
 
            }     
 
vm.pageNum++;
 
this.queueRenderPage(vm.pageNum);
 
        },   
 
queueRenderPage(num) {
 
if(this.pageRendering) {
 
this.pageNumPending=num;
 
}else{
 
this.renderPage(num);
 
            }   
 
        },
 
   渲染pdf文件。 this.pdf是服务器的pdf路径。
 
PDFJS.getDocument(this.pdf).then(function(pdfDoc_) {//初始化pdf 
 
that.pageNum=1
 
that.pdfDoc=pdfDoc_;
 
that.page_count=that.pdfDoc.numPages
 
that.renderPage(that.pageNum);
 
});
 
 
 
全屏:
 
this.winWidth=window.document.documentElement.clientWidth    //改变pdf容器的宽高为全屏大小
 
this.winHeight=window.document.documentElement.clientHeight
 
letvm=this
 
 
 
vm.wid=window.document.documentElement.clientWidth-2      //重新复制viewport
 
//    vm.wid= window.document.documentElement.clientHeight/vm.count
 
this.$refs.cpdf.style.width=window.document.documentElement.clientWidth
 
 
 
this.queueRenderPage(this.pageNum)
 
// 当用户按esc键退回到之前的大小,监听的退出全屏事件。重新wid变量,渲染viewport
 
document.addEventListener("webkitfullscreenchange",function() {
 
if(!document.webkitIsFullScreen){
 
vm.wid=645
 
vm.queueRenderPage(vm.pageNum)
 
                    }
 
},false)
 
document.addEventListener("fullscreenchange",function() {
 
if(!document.fullscreen){
 
vm.wid=645
 
vm.queueRenderPage(vm.pageNum)
 
                    }
 
},false);
 
document.addEventListener("mozfullscreenchange",function() {
 
if(!document.mozFullScreen){
 
vm.wid=645
 
vm.queueRenderPage(vm.pageNum)
 
                    }
 
 
 
},false);
 
 
 
document.addEventListener("msfullscreenchange",function() {
 
if(!document.msFullscreenElement){
 
vm.wid=645
 
vm.queueRenderPage(vm.pageNum)
 
                   
 
fullscreenState.innerHTML= (document.msFullscreenElement)?"":"not ";
 
},false);
 
作者:Y丶小琪
链接:https://www.jianshu.com/p/ecd34ab2cf55
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  

出处:https://www.jianshu.com/p/ecd34ab2cf55

posted @   小码农+1  阅读(4819)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· 赶AI大潮:在VSCode中使用DeepSeek及近百种模型的极简方法
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
点击右上角即可分享
微信分享提示