需求：在线浏览pdf文件，并且禁止掉用户下载打印的效果。

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

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

以下仅是核心代码，css就不展示了。

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的样式和想要使用的功能 。这里是上一页，下一页，全屏功能

< span class= "full" @click=" fullScreen()" >进入全屏 </ span >
< div ref= "cpdf" >
< div ref= "contor" >
< button @click=" prevpage" >上一页 </ button >
< span >Page: < span v-text=" page_num" ></ span > / < span v-text=" page_count" ></ span ></ span >
< button @click=" nextpage" >下一页 </ button >
<!-- <button @click="fullScreen()">全屏</button> -->
</ div >
< canvas class= "canvasstyle" id= "the-canvas" ref= "canvas" ></ canvas >
</ div >

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
let vm = this
this. pageRendering = true;
let canvas = 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的宽度
var viewport = 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)
var renderContext = {
canvasContext: vm. ctx,
viewport: viewport
};
var renderTask = 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() { //上一页
let vm = this
if( vm. pageNum <= 1) {
return;
}
vm. pageNum--;
this. queueRenderPage( vm. pageNum);
},   


下一页

nextpage() { //下一页
let vm = 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
let vm= 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);





GitHub 加速计划 / pd / pdf.js
47.48 K
9.86 K
下载
PDF Reader in JavaScript
最近提交(Master分支：3 个月前 )
18284815 [Editor] Update the disclaimer string in the new alt-text dialog (bug 1911738) 3 个月前
fc602c65 And tweak the css in order to take into account that disclaimer can be on two (or more lines). 3 个月前
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区