vue项目引入第三方js

以禁止浏览器打印功能为例,需要引入noprint.js
内容如下

/*
NoPrint.js V1.0
Created by PDFAntiCopy.com
*/
if (noCopy)
{
document.body.oncopy = function(){return false};
document.body.oncontextmenu = function(){return false};
document.body.onselectstart = document.body.ondrag = function(){
return false;
}
document.onkeydown = function() {
if(event.ctrlKey == true && event.keyCode == 83) {
event.preventDefault();
}
}
}

if (noPrint)
{
var c=document.createElement("span");
c.style.display="none";
c.style.postion="absolute";
c.style.background="#000";
var first=document.body.firstChild;
var wraphtml=document.body.insertBefore(c,first);
c.setAttribute('width', document.body.scrollWidth);
c.setAttribute('height', document.body.scrollHeight);
c.style.display="block";
var cssNode3 = document.createElement('style');
cssNode3.type = 'text/css';
cssNode3.media = 'print';
cssNode3.innerHTML ='body{display:none}';
document.head.appendChild(cssNode3);
}

var cssNode2 = document.createElement('style');
cssNode2.type = 'text/css';
cssNode2.media = 'screen';
cssNode2.innerHTML ='div{-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}';
document.head.appendChild(cssNode2);
document.body.style.cssText="-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;";
function toBlur()
{
if (autoBlur)
document.body.style.cssText="-webkit-filter: blur(5px);-moz-filter: blur(5px);-ms-filter: blur(5px);-o-filter: blur(5px);filter: blur(5px);"
}

function toClear()
{
document.body.style.cssText="-webkit-filter: blur(0px);-moz-filter: blur(0px);-ms-filter: blur(0px);-o-filter: blur(0px);filter: blur(0px);"
}

document.onclick = function(event){
toClear();
}

document.onmouseleave = function(event){
toBlur();
}

document.onblur = function(event){
toBlur();
}

document.addEventListener('keyup', (e) => {
if (e.key == 'PrintScreen') {
if (noScreenshot)
{
navigator.clipboard.writeText('');

}
}
});

document.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.key == 'p') {
if (noPrint)
{
e.cancelBubble = true;
e.preventDefault();
e.stopImmediatePropagation();
}
}
});

  

需要将该noprint.js改写,把上面所有代码包裹进export中,如下:

export function noprintMethod(noPrint,noCopy,noScreenshot,autoBlur){
// 这里是上面js 的所有代码
}

  

vue组件中引入

import {noprintMethod} from ‘@js/noprint.’

mounted(){
   noprintMethod(true,true,true,true)
//传递四个参数
}

  

posted @ 2022-04-20 15:50  zwbsoft  阅读(1094)  评论(0编辑  收藏  举报