file-viewer-js/dist/file-view.umd.cjs

web端文件查看插件(JS版)

(function(a,n){typeof exports=="object"&&typeof module<"u"?module.exports=n(require("element-plus")):typeof define=="function"&&define.amd?define(["element-plus"],n):(a=typeof globalThis<"u"?globalThis:a||self,a.FileView=n(a.ElementPlus))})(this,function(a){"use strict";var g=Object.defineProperty;var P=(a,n,m)=>n in a?g(a,n,{enumerable:!0,configurable:!0,writable:!0,value:m}):a[n]=m;var r=(a,n,m)=>(P(a,typeof n!="symbol"?n+"":n,m),m);function n(o){let e=!1;return function(...t){e||(e=!0,window.requestAnimationFrame(s=>{o.apply(this,t),e=!1}))}}function m(o,e){try{if(e.width<o.width&&e.height<o.height)return e;const t=o.width/o.height,s=e.width/e.height;let i,l;return t<s?(i=o.width,l=o.width/s):(i=o.height*s,l=o.height),{width:parseInt(String(i)),height:parseInt(String(l))}}catch(t){console.log(t)}}class u{constructor({files:e,showUrl:t}){r(this,"fileViewDescElement",null);r(this,"toolPanelParams",{scale:1,rotate:0,offsetX:0,offsetY:0,initX:0,initY:0});r(this,"needTools",!0);r(this,"loadingInstance",null);r(this,"maskElement",null);r(this,"showElement",null);r(this,"maskEnableClick",!1);r(this,"currentIndex",0);r(this,"files");r(this,"_handleMouseWheel",n(e=>{e.deltaY<0?this.handleTool("enlarge"):this.handleTool("narrow")}));this.files=e,this.currentIndex=this.files.findIndex(s=>s.url===t),this.initMask(),this.addCLoseIcon(),this.initArrow(),this.initTools(),this.showFile(this.files[this.currentIndex]),this.initFileName()}initMask(){this.maskElement=document.createElement("div"),this.maskElement.classList.add("file-view-mask");const{innerWidth:e,innerHeight:t}=window;this.maskElement.style.width=e+"px",this.maskElement.style.height=t+"px",document.body.appendChild(this.maskElement),this.maskElement.addEventListener("click",s=>{this.maskEnableClick||s.stopPropagation()})}initTools(){const e=document.createElement("div");e.classList.add("file-view-tools");const t=document.createElement("div");t.className="enlarge-btn tool-btn",t.addEventListener("click",()=>{this.handleTool("enlarge")});const s=document.createElement("div");s.className="narrow-btn tool-btn",s.addEventListener("click",()=>{this.handleTool("narrow")});const i=document.createElement("div");i.className="reset-btn tool-btn",i.addEventListener("click",()=>{this.handleTool("reset")});const l=document.createElement("div");l.className="left-rotate-btn tool-btn",l.addEventListener("click",()=>{this.handleTool("left-rotate")});const d=document.createElement("div");d.className="right-rotate-btn tool-btn",d.addEventListener("click",()=>{this.handleTool("right-rotate")}),this.maskElement&&(e.appendChild(t),e.appendChild(s),e.appendChild(i),e.appendChild(l),e.appendChild(d),this.maskElement.appendChild(e))}addCLoseIcon(){const e=document.createElement("div");e.classList.add("file-view-close"),e.addEventListener("click",()=>{this.close()}),this.maskElement&&this.maskElement.appendChild(e)}initArrow(){if(this.maskElement){const e=document.createElement("div");e.classList.add("left-arrow"),e.id="left-arrow",e.addEventListener("click",()=>{if(this.currentIndex>0){const s=this.currentIndex-1;this.jumpSwitch(s)}}),this.maskElement.appendChild(e);const t=document.createElement("div");t.classList.add("right-arrow"),t.id="right-arrow",t.addEventListener("click",()=>{if(this.currentIndex<this.files.length-1){const s=this.currentIndex+1;this.jumpSwitch(s)}}),this.maskElement.appendChild(t),this.arrowIsActive()}}loadImage(e){var s;this.maskElement&&!this.showElement&&(this.showElement=document.createElement("div"),this.showElement.setAttribute("id","show-element"),this.showElement.classList.add("show-element"),this.maskElement.appendChild(this.showElement)),(s=this.showElement)==null||s.classList.remove("pdf-center"),this.clearShowContent();const t=new Image;t.src=e,t.id="img-box",t.addEventListener("load",()=>{if(!this.showElement)return;const i=t.width,l=t.height,d=this.showElement.offsetWidth,h=this.showElement.offsetHeight,{width:E,height:w}=m({width:d,height:h},{width:i,height:l});t.style.width=E+"px",t.style.height=w+"px";const c=(d-E)/2,f=(h-w)/2;this.toolPanelParams.initX=c,this.toolPanelParams.initY=f,this.toolPanelParams.offsetX=c,this.toolPanelParams.offsetY=f,t.style.left=c+"px",t.style.top=f+"px",this.showElement.appendChild(t),this.showElement.addEventListener("wheel",this._handleMouseWheel),this.showElement.addEventListener("mousedown",p=>{this.handleMouseDown(p)})}),t.addEventListener("error",i=>{console.log("图片加载失败"),console.log(i),this.handleImgLoadError()})}handleMouseDown(e){if(!this.showElement)return;const{offsetX:t,offsetY:s}=this.toolPanelParams,i=e.pageX,l=e.pageY,d=n(h=>{this.toolPanelParams.offsetX=t+h.pageX-i,this.toolPanelParams.offsetY=s+h.pageY-l,this.handleImg()});this.showElement.addEventListener("mousemove",d),this.showElement.addEventListener("mouseup",()=>{var h;(h=this.showElement)==null||h.removeEventListener("mousemove",d)}),this.showElement.addEventListener("mouseleave",()=>{var h;(h=this.showElement)==null||h.removeEventListener("mousemove",d)}),e.preventDefault()}handleImgLoadError(){if(!this.showElement)return;const e=document.createElement("div");e.classList.add("error-tips-text"),e.innerHTML="文件类型不支持预览, 请自行下载后预览";const t=document.createElement("div");t.classList.add("to-download"),t.innerHTML="点击下载",t.addEventListener("click",()=>{const{url:i}=this.files[this.currentIndex],l=document.createElement("a");l.href=i,l.click()});const s=document.createElement("div");s.classList.add("error-tips"),s.appendChild(e),s.appendChild(t),this.showElement.appendChild(s)}loadPDF(e){this.maskElement&&!this.showElement&&(this.showElement=document.createElement("div"),this.showElement.setAttribute("id","show-element"),this.showElement.classList.add("show-element"),this.maskElement.appendChild(this.showElement)),this.clearShowContent();const t=document.createElement("div");t.classList.add("pdf-box"),t.innerHTML="点击预览PDF文件",t.addEventListener("click",()=>{this.previewPDF(e)}),this.showElement&&this.showElement.appendChild(t)}clearShowContent(){this.showElement&&(this.showElement.innerHTML="")}getFileType(e){let t="img";const s=e.split("."),i=s[s.length-1].toLowerCase();return i==="pdf"&&(t=i),t}showFile(e){!e||!e.url||this.getFileType(e.originName)==="pdf"||this.loadImage(e.url)}open(){}uninstallListener(){this.showElement&&this.showElement.removeEventListener("wheel",this._handleMouseWheel)}close(){this.maskElement&&(this.uninstallListener(),this.maskElement.parentElement&&this.maskElement.parentElement.removeChild(this.maskElement),this.maskElement=null)}jumpSwitch(e){var s;this.toolPanelParams.initX=0,this.toolPanelParams.initY=0,this.initToolPanelParams(),((s=this.files[e])==null?void 0:s.url)&&(this.currentIndex=e,this.showFile(this.files[this.currentIndex]),this.setFilePageName(),this.arrowIsActive())}showLoading(){this.loadingInstance=a.ElLoading.service({fullscreen:!0,target:this.showElement})}closeLoading(){this.loadingInstance.close()}async previewPDF(e){}async getBlobFile(e){}initToolPanelParams(){this.toolPanelParams.scale=1,this.toolPanelParams.rotate=0,this.toolPanelParams.offsetX=0,this.toolPanelParams.offsetY=0}handleImg(){const e=document.getElementById("img-box");e&&(e.style.transform=`scale(${this.toolPanelParams.scale}) rotate(${this.toolPanelParams.rotate}deg)`,e.style.transition="all 0.12s",e.style.left=this.toolPanelParams.offsetX+"px",e.style.top=this.toolPanelParams.offsetY+"px")}handleTool(e){let t=this.toolPanelParams.scale,s=this.toolPanelParams.rotate;switch(e){case"enlarge":t+=.05,t>=5&&(t=5),this.toolPanelParams.scale=t,this.handleImg();break;case"narrow":t-=.05,t<=.1&&(t=.1),this.toolPanelParams.scale=t,this.handleImg();break;case"reset":this.initToolPanelParams(),(this.toolPanelParams.initX!==0||this.toolPanelParams.initY!==0)&&(this.toolPanelParams.offsetX=this.toolPanelParams.initX,this.toolPanelParams.offsetY=this.toolPanelParams.initY),this.handleImg();break;case"left-rotate":s=s-90,this.toolPanelParams.rotate=s,this.handleImg();break;case"right-rotate":s=s+90,this.toolPanelParams.rotate=s,this.handleImg();break}}arrowIsActive(){const e=document.getElementById("left-arrow"),t=document.getElementById("right-arrow");if(this.currentIndex===this.files.length-1){e&&e.classList.remove("deactive"),t&&t.classList.add("deactive");return}else if(this.currentIndex===0){t&&t.classList.remove("deactive"),e&&e.classList.add("deactive");return}t&&t.classList.remove("deactive"),e&&e.classList.remove("deactive")}initFileName(){this.maskElement&&(this.fileViewDescElement=document.createElement("div"),this.fileViewDescElement.classList.add("file-view-desc"),this.fileViewDescElement.id="file-view-desc",this.maskElement.appendChild(this.fileViewDescElement),this.setFilePageName())}setFilePageName(){if(this.fileViewDescElement){const e=`${this.currentIndex+1}/${this.files.length}`;this.fileViewDescElement.innerHTML=e}}}const v="";return u});