项目访问view下的静态文件html,现有VUE项目实现PDF文件预览

一、加载工具

3. 下载版本：

4. 将下载好的版本解压后放到项目static文件夹下

5. 在项目中需要使用预览的地方直接引用viewer.html文件，示例如下

打开

import pdf from './pdf'

export default {

components: {

pdf

},

data() {

return {

}

},

methods: {

test() {

window.open('/static/pdfJs/web/viewer.html?file=1.pdf')

}

}

}

6. 取消下载、打印功能(亲测IE11，chrome，firefox有效，记得收藏)

Viewer.html添加display:none属性隐藏图标(总共六处)；

//viewer.html

Open

Print

Download

Open

Print

Download

viewer.js取消按钮事件监听，注释如下内容(总共六处)；

// eventBus._on("print", webViewerPrint);

// eventBus._on("download", webViewerDownload);

// eventBus._on("openfile", webViewerOpenFile);

// eventBus._off("print", webViewerPrint);

// eventBus._off("download", webViewerDownload);

// eventBus._off("openfile", webViewerOpenFile);

禁止右键、区域选择和复制

/*禁止选中文字*/

body{

-moz-user-select: none; /*火狐*/

-webkit-user-select: none; /*webkit浏览器*/

-ms-user-select: none; /*IE10*/

-khtml-user-select: none; /*早期浏览器*/

user-select: none;

}

//viewer.html的

中添加属性

οncοntextmenu="window.event.returnValue=false"

οncοpy="window.event.returnValue=false"

οndragstart="window.event.returnValue=false"

onselectstart="window.event.returnValue=false">

//火狐下

禁止复制此区域

禁止键盘操作ctrl+A,ctrl+P,F12等快捷键操作(此处ctrl+p敲黑板，为了兼顾IE11，测试好久，网上找了好多都不行，自己找出来的)

//viewer.html的

中添加

//禁止任何键盘敲击事件

window.onkeydown = window.onkeyup = window.onkeypress = function (e) {

// 屏蔽ctrl+P 打印

if (e.ctrlKey && e.keyCode == 80) {

alert('禁止使用ctrl+p');

e.preventDefault();

e.returnValue = false;

return false;

}

if(e.keyCode == 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)||e.keyCode == 122||e.keyCode == 123||e.keyCode == 17||e.keyCode == 18){

e.preventDefault();

window.event.returnValue= false;

}

if(e.ctrlKey && e.keyCode== 65){

e.preventDefault();

window.event.returnValue= false;

}

if(e.ctrlKey && e.keyCode== 67){

e.preventDefault();

window.event.returnValue= false;

}

if(e.ctrlKey && e.shiftKey && e.keyCode == 73){

e.preventDefault();

window.event.returnValue= false;

}

}

重中之重：禁止ctrl+p打印，网上找了好多都不行，自己找出来的

//viewer.js中注释如下代码

window.addEventListener("keydown", function (event) {

if (event.keyCode === 80 && (event.ctrlKey || event.metaKey) && !event.altKey && (!event.shiftKey || window.chrome || window.opera)) {

// window.print(); //看这里，注释注释注释，找了好久好久

return false;

if (event.stopImmediatePropagation) {

event.stopImmediatePropagation();

} else {

event.stopPropagation();

}

}

}, true);

7. 缓存问题

//使用中加随机数

window.open('/static/pdfJs/web/viewer.html?file=1.pdf'+Math.random())

8. 文件名中文乱码

//viewer.html编码格式修改

9. 访问服务器文件，允许跨域问题

注释如下代码(viewer.js)中

if (HOSTED_VIEWER_ORIGINS.includes(viewerOrigin)) {

return;

}

var _URL = new URL(file, window.location.href),

origin = _URL.origin,

protocol = _URL.protocol;

if (origin !== viewerOrigin && protocol !== "blob:") {

throw new Error("file origin does not match viewer's");

}

后端服务器返回文件流的形式，前端file后拼接时加encodeURIComponent方法，如下

//调用文件时

window.open('/static/pdfJs/web/viewer.html?file='+encodeURIComponent('外部服务器地址接口，返回文件流格式'))

参考文章

有效记得收藏！欢迎留言...