sakura-preview-file 1.0.0

package/dist/sakura-preview-file.umd.js

@@ -0,0 +1 @@
+!function(e,l){"object"==typeof exports&&"undefined"!=typeof module?l(exports,require("vue"),require("sakura-utils"),require("vue-pdf-embed"),require("pdfjs-dist"),require("@vueuse/core"),require("docx-preview")):"function"==typeof define&&define.amd?define(["exports","vue","sakura-utils","vue-pdf-embed","pdfjs-dist","@vueuse/core","docx-preview"],l):l((e="undefined"!=typeof globalThis?globalThis:e||self).SakuraPreviewFile={},e.Vue,e.sakuraUtils,e.VuePdfEmbed,null,e.core,e.docxPreview)}(this,(function(e,l,a,o,t,n,r){"use strict";const s=["stroke"],i=(e,l)=>{const a=e.__vccOpts||e;for(const[o,t]of l)a[o]=t;return a},c={Circle:i(l.defineComponent({__name:"Circle",props:{size:{default:50},color:{default:"#409eff"},duration:{default:2}},setup(e){const o=e,t=l.computed(()=>{const{size:e,duration:l}=o;return{"--circle-size":a.addUnit(e),"--circle-duration":l+"s"}});return(a,o)=>(l.openBlock(),l.createElementBlock("svg",{class:"circular",viewBox:"0 0 50 50",style:l.normalizeStyle([t.value])},[l.createElementVNode("circle",{class:"circular__path-inner",cx:"25",cy:"25",r:"20",fill:"none",stroke:e.color,"stroke-width":"4","stroke-miterlimit":"10"},null,8,s)],4))}}),[["__scopeId","data-v-51d1fa15"]]),Dot:i(l.defineComponent({__name:"Dot",props:{gap:{default:6},color:{default:"var(--preview-file-primary-color)"},size:{default:10},duration:{default:1.4}},setup(e){const o=e,t=l.computed(()=>{const{size:e,gap:l,duration:t,color:n}=o;return{"--dot-size":a.addUnit(e),"--dot-duration":t+"s","--dot-gap":a.addUnit(l),"--dot-color":n}});return(e,a)=>(l.openBlock(),l.createElementBlock("div",{class:"dot",style:l.normalizeStyle([t.value])},[...a[0]||(a[0]=[l.createElementVNode("div",{class:"dot__item"},null,-1),l.createElementVNode("div",{class:"dot__item"},null,-1),l.createElementVNode("div",{class:"dot__item"},null,-1)])],4))}}),[["__scopeId","data-v-2acd99b5"]]),Progress:i(l.defineComponent({__name:"Progress",props:{width:{default:200},height:{default:4},background:{default:"#ebeef5"},radius:{},color:{default:"var(--preview-file-primary-color)"},duration:{default:2}},setup(e){const o=e,t=l.computed(()=>{const{width:e,height:l,color:t,duration:n,radius:r,background:s}=o;return{"--progress-width":a.addUnit(e),"--progress-height":a.addUnit(l),"--progress-border-radius":a.addUnit(r||Number(l)/2),"--progress-background":s,"--progress-duration":n+"s","--progress-color":t}});return(e,a)=>(l.openBlock(),l.createElementBlock("div",{class:"progress",style:l.normalizeStyle([t.value])},[...a[0]||(a[0]=[l.createElementVNode("div",{class:"progress__bar"},null,-1)])],4))}}),[["__scopeId","data-v-3a710001"]]),Cube:i(l.defineComponent({__name:"Cube",props:{size:{default:40},color:{default:"var(--preview-file-primary-color)"},duration:{default:1.3}},setup(e){const o=e,t=l.computed(()=>{const{size:e,duration:l,color:t}=o;return{"--cube-size":a.addUnit(e),"--cube-color":t,"--cube-duration":l+"s"}});return(e,a)=>(l.openBlock(),l.createElementBlock("div",{class:"cube",style:l.normalizeStyle([t.value])},[(l.openBlock(),l.createElementBlock(l.Fragment,null,l.renderList(9,e=>l.createElementVNode("div",{key:e,class:"cube__item"})),64))],4))}}),[["__scopeId","data-v-0e6bb9d0"]])},u=(e,l,a,o,t)=>{let n=e+"-"+l;return a&&(n+="-"+a),o&&(n+="__"+o),t&&(n+="--"+t),n},d=e=>{const o=l.ref(""),t=l.computed(()=>a.isEmpty(o.value)?a.FILE_TYPE.IMAGE:a.getFileType(e.convertToLocalFileUrl?e.src:o.value));return l.watchEffect(async()=>{const{src:l}=e;o.value="",l instanceof Blob?o.value=a.base64ToFileUrl(await a.blobToBase64(l)):a.isBase64File(l)?o.value=a.base64ToFileUrl(l):o.value=e.convertToLocalFileUrl?await a.networkFileUrlToLocalFileUrl(l):l}),{fileType:t,fileUrl:o}},m=(e={})=>{const{maxScale:o=3,minScale:t=.4,stepNum:r=.2,wheelNum:s=.3}=e,i=l.ref(1),c=l.computed(()=>a.numberToFixed(100*i.value,0)+"%"),u=(e=r)=>{i.value=Math.max(t,i.value-=e)},d=(e=r)=>{i.value=(i.value+=e)>o?o:i.value},m=n.useThrottleFn(()=>u(),300),p=n.useThrottleFn(()=>d(),300);return{clickMinusScale:m,clickPlusScale:p,scale:i,scaleText:c,onWheel:e=>{e.ctrlKey&&(e.preventDefault(),e.deltaY>0?u(Math.random()*s):d(Math.random()*s))},resetWheelState:()=>{i.value=1}}},p=(e,a)=>{const{onWheel:o,clickMinusScale:t,clickPlusScale:n,resetWheelState:r,scale:s,scaleText:i}=m(),{isMouseDown:c,onMouseStart:u,resetMouseState:d,translateX:p,translateY:f}=(()=>{const e=l.ref(!1),a=l.ref(0),o=l.ref(0),t=l.ref(0),n=l.ref(0),r=l=>{if(!e.value)return;l.preventDefault();const r=l.clientX,s=l.clientY;t.value=r-a.value,n.value=s-o.value},s=()=>{e.value=!1,window.removeEventListener("mousemove",r),window.removeEventListener("mouseup",s)};return{resetMouseState:()=>{a.value=0,o.value=0,t.value=0,n.value=0,e.value=!1},onMouseStart:l=>{e.value=!0,a.value=l.clientX-t.value,o.value=l.clientY-n.value,window.addEventListener("mousemove",r),window.addEventListener("mouseup",s)},translateX:t,translateY:n,isMouseDown:e}})(),v=l.computed(()=>({transform:`translate(${p.value}px, ${f.value}px) scale(${s.value})`,transformOrigin:"center center"})),g=()=>{d(),r()};l.watch(()=>null==a?void 0:a.value,g);const k=l.ref(null);return l.watch(()=>e.value,()=>{k.value&&(k.value.scrollTop=0,g())}),{wrapperRef:k,onWheel:o,clickMinusScale:t,clickPlusScale:n,resetWheelState:r,scale:s,scaleText:i,isMouseDown:c,onMouseStart:u,resetMouseState:d,translateX:p,translateY:f,wrapperStyle:v}};var f=(e=>(e["完成"]="loaded",e["改变"]="change",e["下一页"]="next",e["上一页"]="prev",e["放大"]="zoomIn",e["缩小"]="zoomOut",e))(f||{});const v={class:"file-data__tools"},g={class:"file-data__page"},k={class:"file-data__text"},b={key:1,class:"file-data__scale"},w={class:"file-data__scale-text"},h=l.defineComponent({__name:"Tools",props:l.mergeModels({showTools:{type:Boolean},total:{},scaleText:{},nextPageDisabled:{type:Boolean},prevPageDisabled:{type:Boolean},enablePagination:{type:Boolean},enableMove:{type:Boolean},enableScale:{type:Boolean}},{modelValue:{type:Number,default:1},modelModifiers:{}}),emits:l.mergeModels([f.改变,f.下一页,f.上一页,f.放大,f.缩小],["update:modelValue"]),setup(e,{emit:a}){const o=a,t=l.useModel(e,"modelValue");return(a,n)=>(l.openBlock(),l.createElementBlock("div",v,[l.renderSlot(a.$slots,"default"),e.showTools?(l.openBlock(),l.createElementBlock(l.Fragment,{key:0},[e.enablePagination?(l.openBlock(),l.createElementBlock(l.Fragment,{key:0},[l.createElementVNode("div",{class:l.normalizeClass(["file-data__arrow file-data__arrow-prev",[e.prevPageDisabled?"is-disabled":""]]),onClick:n[0]||(n[0]=e=>o(l.unref(f).上一页))},null,2),l.createElementVNode("div",g,[l.withDirectives(l.createElementVNode("input",{class:"file-data__input","onUpdate:modelValue":n[1]||(n[1]=e=>t.value=e),onBlur:n[2]||(n[2]=e=>o(l.unref(f).改变))},null,544),[[l.vModelText,t.value]]),l.createElementVNode("span",k," / "+l.toDisplayString(e.total),1)]),l.createElementVNode("div",{class:l.normalizeClass(["file-data__arrow file-data__arrow-next",[e.nextPageDisabled?"is-disabled":""]]),onClick:n[3]||(n[3]=e=>o(l.unref(f).下一页))},null,2)],64)):l.createCommentVNode("",!0),e.enableScale?(l.openBlock(),l.createElementBlock("div",b,[l.createElementVNode("div",{class:"file-data__icon file-data__minus",onClick:n[4]||(n[4]=e=>o(l.unref(f).缩小))}),l.createElementVNode("span",w,l.toDisplayString(e.scaleText),1),l.createElementVNode("div",{class:"file-data__icon file-data__plus",onClick:n[5]||(n[5]=e=>o(l.unref(f).放大))})])):l.createCommentVNode("",!0)],64)):l.createCommentVNode("",!0)]))}}),y={class:"file-data"},_=l.defineComponent({__name:"Pdf",props:l.mergeModels({enablePagination:{type:Boolean,default:!0},enableScale:{type:Boolean,default:!0},enableMove:{type:Boolean,default:!0},fileUrl:{},showTools:{type:Boolean,default:!0}},{modelValue:{type:Boolean,default:!1},modelModifiers:{}}),emits:l.mergeModels([f.完成],["update:modelValue"]),setup(e,{emit:t}){const r=e,s=t,i=l.useModel(e,"modelValue"),c=l.computed(()=>({url:r.fileUrl,fontExtraProperties:!0,cMapUrl:"./cmaps/",cMapPacked:!0,disableFontFace:!1,enableXfa:!0,fontLoadTimeout:3e4,verbosity:0})),u=l.reactive({pageNum:1,total:0,isError:!1}),d=l.ref(0),m=async e=>{var o;u.total=e._pdfInfo.numPages,await l.nextTick(),await a.sleep(50),d.value=(null==(o=document.querySelector(".vue-file-dataembed"))?void 0:o.clientHeight)??0},v=()=>{u.isError=!0},g=async()=>{await a.sleep(300),i.value=!1,s(f.完成)},{prevPageDisabled:k,nextPageDisabled:b,nextPage:w,_pageNum:_,onPageNumChange:B,prevPage:V}=(e=>{const a=l.computed(()=>e.pageNum>=e.total),o=n.useThrottleFn(()=>{a.value||e.pageNum++},500),t=l.computed(()=>e.pageNum<=1),r=n.useThrottleFn(()=>{t.value||e.pageNum--},500),s=l.ref(1);return l.watchEffect(()=>{s.value=e.pageNum}),{nextPage:o,nextPageDisabled:a,prevPage:r,prevPageDisabled:t,_pageNum:s,onPageNumChange:()=>{const{total:l}=e;e.pageNum=Math.max(Math.min(s.value,l),1)}}})(u),N=()=>{i.value=!0,_.value=1,a.extend(u,{pageNum:1,total:0,isError:!1})};l.watch(()=>r.fileUrl,N),l.onMounted(N);const{pageNum:E}=l.toRefs(u),{fileUrl:S}=l.toRefs(r),{onWheel:M,clickMinusScale:x,clickPlusScale:C,isMouseDown:P,scaleText:T,onMouseStart:U,wrapperStyle:F}=p(S,E);return(a,t)=>(l.openBlock(),l.createElementBlock("div",y,[l.createElementVNode("div",{ref:"wrapperRef",class:l.normalizeClass(["file-data__wrapper",[l.unref(P)?"is-drag":""]]),onMousedown:t[0]||(t[0]=a=>e.enableMove&&l.unref(U)(a)),onWheel:t[1]||(t[1]=a=>e.enableScale&&l.unref(M)(a))},[l.createElementVNode("div",{style:l.normalizeStyle([l.unref(F)])},[l.createVNode(l.unref(o),{class:"pdf",source:c.value,page:e.enablePagination?u.pageNum:void 0,scale:1,onLoaded:m,onRendered:g,onError:v},null,8,["source","page"])],4)],34),e.enablePagination||e.enableScale||e.showTools?(l.openBlock(),l.createBlock(h,{key:0,modelValue:l.unref(_),"onUpdate:modelValue":t[2]||(t[2]=e=>l.isRef(_)?_.value=e:null),total:u.total,"prev-page-disabled":l.unref(k),"next-page-disabled":l.unref(b),"scale-text":l.unref(T),"show-tools":e.showTools,"enable-pagination":e.enablePagination,"enable-scale":e.enableScale,"enable-move":e.enableMove,onChange:l.unref(B),onNext:l.unref(w),onPrev:l.unref(V),onZoomIn:l.unref(C),onZoomOut:l.unref(x)},{default:l.withCtx(()=>[l.renderSlot(a.$slots,"default",{fileDataState:u})]),_:3},8,["modelValue","total","prev-page-disabled","next-page-disabled","scale-text","show-tools","enable-pagination","enable-scale","enable-move","onChange","onNext","onPrev","onZoomIn","onZoomOut"])):l.createCommentVNode("",!0)]))}}),B={class:"file-data"},V=l.defineComponent({__name:"Word",props:l.mergeModels({enablePagination:{type:Boolean},enableScale:{type:Boolean},enableMove:{type:Boolean},fileUrl:{},showTools:{type:Boolean,default:!0},isLocalFile:{type:Boolean,default:!1},enableWrapper:{type:Boolean,default:!0}},{modelValue:{type:Boolean,default:!1},modelModifiers:{}}),emits:l.mergeModels([f.完成],["update:modelValue"]),setup(e,{emit:o}){const t=e,n=l.useModel(e,"modelValue"),s=l.useTemplateRef("wordFileRef"),i=async()=>{try{n.value=!0,s.value&&(s.value.innerHTML="");const e=await(async()=>{const e=await fetch(t.fileUrl),l=await e.blob();return a.base64ToFile(await a.blobToBase64(l),a.generateId()+".docx")})();await r.renderAsync(e,s.value,void 0,{className:"docx",inWrapper:t.enableWrapper,ignoreWidth:!0,ignoreHeight:!1,ignoreFonts:!0,breakPages:!0,ignoreLastRenderedPageBreak:!0,experimental:!1,trimXmlDeclaration:!0}),await l.nextTick()}catch(e){console.log("fileUrl---",t.fileUrl),console.log("加载word文件失败----",e)}finally{n.value=!1}};l.onMounted(i),l.watch(()=>t.fileUrl,i);const{fileUrl:c}=l.toRefs(t),{onWheel:u,clickMinusScale:d,clickPlusScale:m,isMouseDown:f,scaleText:v,onMouseStart:g,wrapperStyle:k}=p(c);return(a,o)=>(l.openBlock(),l.createElementBlock("div",B,[l.createElementVNode("div",{ref:"wrapperRef",class:l.normalizeClass(["file-data__wrapper",[l.unref(f)?"is-drag":"",e.enableWrapper?"is-enable-wrapper":""]]),onMousedown:o[0]||(o[0]=a=>e.enableMove&&l.unref(g)(a)),onWheel:o[1]||(o[1]=a=>e.enableScale&&l.unref(u)(a))},[l.createElementVNode("div",{ref_key:"wordFileRef",ref:s,style:l.normalizeStyle([l.unref(k)])},null,4)],34),e.enablePagination||e.enableScale||e.showTools?(l.openBlock(),l.createBlock(h,{key:0,"scale-text":l.unref(v),"show-tools":e.showTools,"enable-scale":e.enableScale,"enable-move":e.enableMove,onZoomIn:l.unref(m),onZoomOut:l.unref(d)},{default:l.withCtx(()=>[l.renderSlot(a.$slots,"default")]),_:3},8,["scale-text","show-tools","enable-scale","enable-move","onZoomIn","onZoomOut"])):l.createCommentVNode("",!0)]))}}),N={width:"24",height:"24",fill:"none"};const E=i({},[["render",function(e,a){return l.openBlock(),l.createElementBlock("svg",N,[...a[0]||(a[0]=[l.createElementVNode("circle",{cx:"10.5",cy:"10.5",r:"6.5",stroke:"#fff","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},null,-1),l.createElementVNode("path",{d:"M15.5 15.5L20 20",stroke:"#fff","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},null,-1)])])}]]),S={width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"};const M=i({},[["render",function(e,a){return l.openBlock(),l.createElementBlock("svg",S,[...a[0]||(a[0]=[l.createElementVNode("circle",{cx:"10.5",cy:"10.5",r:"6.5",stroke:"#fff","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},null,-1),l.createElementVNode("path",{d:"M7.5 10.5H13.5",stroke:"#fff","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},null,-1),l.createElementVNode("path",{d:"M15.5 15.5L20 20",stroke:"#fff","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},null,-1)])])}]]),x={width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"};const C=i({},[["render",function(e,a){return l.openBlock(),l.createElementBlock("svg",x,[...a[0]||(a[0]=[l.createElementVNode("path",{d:"M7 7L17 17",stroke:"#fff","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},null,-1),l.createElementVNode("path",{d:"M7 17L17 7",stroke:"#fff","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},null,-1)])])}]]),P={class:"file-data"},T={class:"file-data__wrapper is-image"},U=["src"],F={class:"sakura-preview__image--data"},z=["src"],D={key:0,class:"sakura-preview__image--tools"},L=l.defineComponent({__name:"Image",props:l.mergeModels({enablePagination:{type:Boolean},enableScale:{type:Boolean},enableMove:{type:Boolean},fileUrl:{},showTools:{type:Boolean}},{modelValue:{type:Boolean,default:!1},modelModifiers:{}}),emits:["update:modelValue"],setup(e){const o=e,t=l.useModel(e,"modelValue"),r=()=>{t.value=!1},{width:s,height:i}=n.useWindowSize(),c=l.ref(0),u=l.ref(0);l.onMounted(async()=>{const e=o.fileUrl;c.value=0,u.value=0;const l=new Image;l.src=e,l.onload=()=>{c.value=l.width,u.value=l.height}});const d=l.computed(()=>c.value>s.value?{width:"auto",height:a.addUnit(i.value)}:{width:a.addUnit(c.value),height:a.addUnit(u.value)}),{fileUrl:m}=l.toRefs(o),{onWheel:f,onMouseStart:v,isMouseDown:g,clickMinusScale:k,clickPlusScale:b,wrapperStyle:w}=p(m),h=l.ref(!1),y=()=>{h.value=!h.value};return(a,o)=>(l.openBlock(),l.createElementBlock(l.Fragment,null,[l.createElementVNode("div",P,[l.createElementVNode("div",T,[l.createElementVNode("img",{class:"file-data__image",src:l.unref(m),alt:"",onLoad:r,onClick:y},null,40,U)])]),(l.openBlock(),l.createBlock(l.Teleport,{to:"body"},[l.createElementVNode("div",{class:l.normalizeClass(["sakura-preview-dialog",[h.value?"is-visible":""]])},[o[2]||(o[2]=l.createElementVNode("div",{class:"sakura-preview__image--mark"},null,-1)),l.createElementVNode("div",{ref:"wrapperRef",class:l.normalizeClass(["sakura-preview__image",[l.unref(g)?"is-drag":""]]),onMousedown:o[0]||(o[0]=a=>e.enableMove&&l.unref(v)(a)),onWheel:o[1]||(o[1]=a=>e.enableScale&&l.unref(f)(a))},[l.createElementVNode("div",F,[l.createElementVNode("img",{class:"dot-move",src:l.unref(m),style:l.normalizeStyle([d.value,l.unref(w)]),alt:""},null,12,z)]),l.createElementVNode("div",{class:"sakura-preview__image--close",onClick:y},[l.createVNode(C)]),e.enableScale?(l.openBlock(),l.createElementBlock("div",D,[l.createVNode(E,{onClick:l.unref(b)},null,8,["onClick"]),l.createVNode(M,{onClick:l.unref(k)},null,8,["onClick"])])):l.createCommentVNode("",!0)],34)],2)]))],64))}}),$=Symbol("PreviewFile"),W=l.defineComponent({__name:"preview-file",props:{width:{default:"100%"},height:{default:"100%"},src:{},enablePagination:{type:Boolean,default:!0},enableScale:{type:Boolean,default:!0},enableMove:{type:Boolean,default:!0},loadingType:{default:"circle"},loadingState:{default:()=>({})},convertToLocalFileUrl:{type:Boolean,default:!1},themeColor:{default:"#409eff"}},setup(e){const o=e;l.provide($,o);const t=((e,a)=>{const o=l.unref(a)??"sakura"??e,t=e=>`${o}-${e}`,n=(e,l)=>`${o}-${e}-${l}`;return{b:(l="")=>u(o,e,l,"",""),e:(l="")=>l?u(o,e,"",l,""):"",m:(l="")=>l?u(o,e,"","",l):"",be:(l="",a="")=>l&&a?u(o,e,l,a,""):"",em:(l="",a="")=>l&&a?u(o,e,"",l,a):"",bm:(l="",a="")=>l&&a?u(o,e,l,"",a):"",bem:(l="",a="",t="")=>l&&a&&t?u(o,e,l,a,t):"",is:(e,...l)=>(!l.length||l[0])&&e?"is-"+e:"",cssVar:e=>{const l={};for(const a in e)e[a]&&(l[`--${o}-${a} `]=e[a]);return l},cssBlockVar:(e,l)=>{const a={};for(const t in l)l[t]&&(a[`--${o}-${e}-${t}`]=l[t]);return a},cssVarName:t,cssBlockVarName:n,cssVarNameValue:e=>`var(--${t(e)})`,cssBlockVarNameValue:(e,l)=>`var(--${n(e,l)})`}})("preview-file"),n=l.computed(()=>{const{width:e,height:l,themeColor:t}=o,n={"--preview-file-primary-color":t};return a.isEmpty(e)||(n.width=a.addUnit(e)),a.isEmpty(l)||(n.height=a.addUnit(l)),n}),{fileType:r,fileUrl:s}=d(o),i=l.ref(!0),m=l.computed(()=>{const{loadingType:e}=o;switch(e){case"circle":return c.Circle;case"dot":return c.Dot;case"cube":return c.Cube;case"progress":default:return c.Progress}});return(c,u)=>(l.openBlock(),l.createElementBlock("div",{class:l.normalizeClass(l.unref(t).b()),style:l.normalizeStyle([n.value])},[l.unref(a.isEmpty)(l.unref(s))?l.createCommentVNode("",!0):(l.openBlock(),l.createElementBlock("div",{key:0,class:l.normalizeClass([l.unref(t).e("wrapper")])},[l.unref(a.isPdfFile)(l.unref(r))?(l.openBlock(),l.createBlock(_,{key:0,modelValue:i.value,"onUpdate:modelValue":u[0]||(u[0]=e=>i.value=e),"file-url":l.unref(s),"show-tools":!c.$slots.default,"enable-pagination":e.enablePagination,"enable-scale":e.enableScale,"enable-move":e.enableMove},{default:l.withCtx(({fileDataState:e})=>[l.renderSlot(c.$slots,"default",{fileState:e,data:o})]),_:3},8,["modelValue","file-url","show-tools","enable-pagination","enable-scale","enable-move"])):l.createCommentVNode("",!0),l.unref(a.isWordFile)(l.unref(r))?(l.openBlock(),l.createBlock(V,{key:1,modelValue:i.value,"onUpdate:modelValue":u[1]||(u[1]=e=>i.value=e),"file-url":l.unref(s),"show-tools":!c.$slots.default,"enable-pagination":e.enablePagination,"enable-scale":e.enableScale,"enable-move":e.enableMove,"is-local-file":e.convertToLocalFileUrl},null,8,["modelValue","file-url","show-tools","enable-pagination","enable-scale","enable-move","is-local-file"])):l.unref(a.isImageFile)(l.unref(r))?(l.openBlock(),l.createBlock(L,{key:2,modelValue:i.value,"onUpdate:modelValue":u[2]||(u[2]=e=>i.value=e),"file-url":l.unref(s),"show-tools":!c.$slots.default,"enable-scale":e.enableScale,"enable-move":e.enableMove},null,8,["modelValue","file-url","show-tools","enable-scale","enable-move"])):l.createCommentVNode("",!0)],2)),l.withDirectives(l.createElementVNode("div",{class:l.normalizeClass([l.unref(t).e("loading")])},[l.createElementVNode("div",{class:l.normalizeClass([l.unref(t).e("loading-spinner")])},[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(m.value),l.normalizeProps(l.guardReactiveProps({...e.loadingState,color:e.themeColor})),null,16))],2)],2),[[l.vShow,i.value]])],6))}}),I=W;I.install=e=>{e.component("PreviewFile",W),e.component("Loading",c)},e.Loading=c,e.default=I,Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/dist/style.css

@@ -0,0 +1 @@
+.circular[data-v-51d1fa15]{position:relative;width:var(--circle-size);height:var(--circle-size)}.circular__path-inner[data-v-51d1fa15]{animation:dash-51d1fa15 var(--circle-duration) ease-in-out infinite;stroke-linecap:round}@keyframes dash-51d1fa15{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}.dot[data-v-2acd99b5]{display:flex;align-items:center;justify-content:center;gap:var(--dot-gap)}.dot__item[data-v-2acd99b5]{width:var(--dot-size);height:var(--dot-size);border-radius:50%;background-color:var(--dot-color);animation:bounce-2acd99b5 var(--dot-duration) ease-in-out infinite}.dot__item[data-v-2acd99b5]:nth-child(2){animation-delay:-.32s}.dot__item[data-v-2acd99b5]:nth-child(3){animation-delay:-.16s}@keyframes bounce-2acd99b5{0%,80%,to{transform:scale(0);opacity:.5}40%{transform:scale(1);opacity:1}}.progress[data-v-3a710001]{width:var(--progress-width);height:var(--progress-height);background-color:var(--progress-background);border-radius:var(--progress-border-radius);overflow:hidden;position:relative}.progress__bar[data-v-3a710001]{position:absolute;width:100%;height:100%;background-color:var(--progress-color);border-radius:var(--progress-border-radius);animation:progress-3a710001 var(--progress-duration) ease-in-out infinite}@keyframes progress-3a710001{0%{transform:translate(-100%)}to{transform:translate(100%)}}.cube[data-v-0e6bb9d0]{width:var(--cube-size);height:var(--cube-size);position:relative;display:flex;flex-wrap:wrap}.cube__item[data-v-0e6bb9d0]{width:33%;height:33%;background-color:var(--cube-color);animation:cubeGrid-0e6bb9d0 var(--cube-duration) infinite ease-in-out}.cube__item[data-v-0e6bb9d0]:nth-child(1){animation-delay:.2s}.cube__item[data-v-0e6bb9d0]:nth-child(2){animation-delay:.3s}.cube__item[data-v-0e6bb9d0]:nth-child(3){animation-delay:.4s}.cube__item[data-v-0e6bb9d0]:nth-child(4){animation-delay:.1s}.cube__item[data-v-0e6bb9d0]:nth-child(5){animation-delay:.2s}.cube__item[data-v-0e6bb9d0]:nth-child(6){animation-delay:.3s}.cube__item[data-v-0e6bb9d0]:nth-child(7){animation-delay:0s}.cube__item[data-v-0e6bb9d0]:nth-child(8){animation-delay:.1s}.cube__item[data-v-0e6bb9d0]:nth-child(9){animation-delay:.2s}@keyframes cubeGrid-0e6bb9d0{0%,70%,to{transform:scaleZ(1)}35%{transform:scale3D(0,0,1)}}

package/package.json

@@ -0,0 +1,59 @@
+{
+    "name": "sakura-preview-file",
+    "version": "1.0.0",
+    "description": "预览文件",
+    "type": "module",
+    "sideEffects": false,
+    "private": false,
+    "main": "./dist/sakura-preview-file.umd.cjs",
+    "module": "./dist/sakura-preview-file.js",
+    "types": "./dist/types/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/types/index.d.ts",
+            "import": "./dist/sakura-preview-file.js",
+            "require": "./dist/sakura-preview-file.umd.cjs"
+        },
+        "./dist/style.css": "./dist/style.css",
+        "./*": "./*"
+    },
+    "files": [
+        "dist",
+        "src"
+    ],
+    "scripts": {
+        "dev": "vite",
+        "build": "npm run build:bundle",
+        "build:bundle": "vite build",
+        "build:types": "npx vue-tsc --declaration --emitDeclarationOnly --outDir dist/types",
+        "type-check": "npx vue-tsc --noEmit",
+        "test": "vitest",
+        "test:ui": "vitest --ui",
+        "test:coverage": "vitest run --coverage",
+        "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
+        "prepublishOnly": "npm run build"
+    },
+    "peerDependencies": {
+        "@vueuse/core": "^12.3.0",
+        "docx-preview": "^0.3.7",
+        "pdfjs-dist": "2.3.200",
+        "sakura-utils": "^1.0.7",
+        "vue": "^3.3.0",
+        "vue-pdf-app": "^2.1.0",
+        "vue-pdf-embed": "^2.1.3"
+    },
+    "devDependencies": {
+        "@types/node": "^20.0.0",
+        "@types/pdfjs-dist": "^2.10.378",
+        "@vitejs/plugin-vue": "^4.0.0",
+        "@vitest/ui": "^0.34.0",
+        "@vue/test-utils": "^2.4.0",
+        "@vue/tsconfig": "^0.4.0",
+        "happy-dom": "^9.0.0",
+        "sass": "^1.97.0",
+        "typescript": "^5.0.0",
+        "vite": "^4.0.0",
+        "vitest": "^0.34.0",
+        "vue-tsc": "^3.2.1"
+    }
+}

package/src/App.vue

@@ -0,0 +1,70 @@
+<template>
+    <div class="preview-data">
+        <PreviewFile
+            :src="fileUrl"
+            enable-pagination
+            loading-type="cube"
+            convert-to-local-file-url
+            theme-color="red"
+        >
+
+        </PreviewFile>
+    </div>
+    <button @click="fileUrl = pdfFileUrl">change-pdf</button>
+    <button @click="fileUrl = pdfFileUrl2">change-pdf2</button>
+    <button @click="fileUrl = wordFileUrl">change-word</button>
+    <button @click="fileUrl = wordFileUrl2">change-word2</button>
+    <button @click="fileUrl = imageFileUrl">change-image</button>
+    <button @click="fileUrl = imageFileUrl2">change-image2</button>
+</template>
+
+<script setup lang="ts">
+import PreviewFile from '../lib/preview-file/preview-file.vue'
+import { ref } from 'vue'
+// import VuePdfApp from 'vue-pdf-app'
+// import 'vue-pdf-app/dist/icons/main.css'
+
+const pdfFileUrl = 'https://zxfwzj.nbcourt.gov.cn/yszh/fp/yszh/wjsc/2025/12/23/df6c7058c11f4d7bac0a10b1fd59cc29/snoxw8mb806obnzg.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20251223T061644Z&X-Amz-SignedHeaders=host&X-Amz-Credential=0XKH2ncdi90pe1sthp7B%2F20251223%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Expires=10800&X-Amz-Signature=3d26133f9d77d9f21d4a07a3cad4712aa3aec6647aa482ee7dc24683fdcf8a5c'
+const pdfFileUrl2 = 'https://zxfwzj.nbcourt.gov.cn/yszh/fp/yszh/wjsc/2025/12/23/59aabc90f0f34a94b49b68781f40cab9/scp6283zhf2q7rct.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20251223T061704Z&X-Amz-SignedHeaders=host&X-Amz-Credential=0XKH2ncdi90pe1sthp7B%2F20251223%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Expires=10800&X-Amz-Signature=bb5d7147e6b4ff874c614932b9403c87f1451c063efb803620df44761a8dc723'
+const wordFileUrl = 'https://zxfwzj.nbcourt.gov.cn/yszh/fp/yszh/wjsc/2025/12/23/cbdf7b1ee4fd479690098f90e24d241c/shgjkeii8d16x1tq.docx?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20251223T060912Z&X-Amz-SignedHeaders=host&X-Amz-Credential=0XKH2ncdi90pe1sthp7B%2F20251223%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Expires=10800&X-Amz-Signature=d5f117023be0169818eed0699433c0b1b3810b88cbffa5a93f6f04b8f2a6cb16'
+const wordFileUrl2 = 'https://zxfwzj.nbcourt.gov.cn/yszh/fp/yszh/wjsc/2025/12/23/590bbe20a7304ab6ab1419eb9add0465/s897q3svi80vnjxr.docx?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20251223T061108Z&X-Amz-SignedHeaders=host&X-Amz-Credential=0XKH2ncdi90pe1sthp7B%2F20251223%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Expires=10800&X-Amz-Signature=df34e4b5b6e42682ca9ef303644934b8be034e73b084dcf775540541f2a7306a'
+const imageFileUrl = 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg'
+const imageFileUrl2 = 'https://zxfwzj.nbcourt.gov.cn/yszh/fp/yszh/wjsc/2025/12/23/01c9bc0af9544ed29e11c968e344c474/syx8iucxw3kcekml.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20251223T074254Z&X-Amz-SignedHeaders=host&X-Amz-Credential=0XKH2ncdi90pe1sthp7B%2F20251223%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Expires=10800&X-Amz-Signature=43af96c90ca6a477c4f3373a24ca978d45184e5badeb2f2afa82adb79cce8805'
+
+const fileUrl = ref(wordFileUrl2)
+
+const config = {
+    // 工具栏配置
+    toolbar: {
+        toolbarViewerRight: {
+            presentationMode: false,    // 演示模式
+            openFile: false,           // 打开文件
+            print: true,               // 打印
+            download: true,            // 下载
+            viewBookmark: false,       // 书签
+            secondaryToolbarToggle: false // 次级工具栏
+        },
+        toolbarViewerLeft: {
+            pageNumber: true,          // 页码
+            numPages: true,            // 总页数
+            zoomOut: true,             // 缩小
+            zoomIn: true,              // 放大
+            scaleSelectContainer: true, // 缩放选择
+            previous: true,             // 上一页
+            next: true                 // 下一页
+        }
+    },
+    // 查看器配置
+    viewer: {
+        scrollMode: 0,     // 0: 垂直, 1: 水平, 2: 连续
+        spreadMode: 0     // 0: 单页, 1: 双页, 2: 连续双页
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.preview-data {
+    width: 842px;
+    height: 800px;
+}
+</style>

package/src/main.ts

@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import '../lib/style/index.scss'
+
+const app = document.querySelector<HTMLDivElement>('#app')
+createApp(App).mount(app!)
+

package/src/style.css

@@ -0,0 +1,95 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vanilla:hover {
+  filter: drop-shadow(0 0 2em #3178c6aa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/src/typescript.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#007ACC" d="M0 128v128h256V0H0z"></path><path fill="#FFF" d="m56.612 128.85l-.081 10.483h33.32v94.68h23.568v-94.68h33.321v-10.28c0-5.69-.122-10.444-.284-10.566c-.122-.162-20.4-.244-44.983-.203l-44.74.122l-.121 10.443Zm149.955-10.742c6.501 1.625 11.459 4.51 16.01 9.224c2.357 2.52 5.851 7.111 6.136 8.208c.08.325-11.053 7.802-17.798 11.988c-.244.162-1.22-.894-2.317-2.52c-3.291-4.795-6.745-6.867-12.028-7.233c-7.76-.528-12.759 3.535-12.718 10.321c0 1.992.284 3.17 1.097 4.795c1.707 3.536 4.876 5.649 14.832 9.956c18.326 7.883 26.168 13.084 31.045 20.48c5.445 8.249 6.664 21.415 2.966 31.208c-4.063 10.646-14.14 17.879-28.323 20.276c-4.388.772-14.79.65-19.504-.203c-10.28-1.828-20.033-6.908-26.047-13.572c-2.357-2.6-6.949-9.387-6.664-9.874c.122-.163 1.178-.813 2.356-1.504c1.138-.65 5.446-3.129 9.509-5.485l7.355-4.267l1.544 2.276c2.154 3.29 6.867 7.801 9.712 9.305c8.167 4.307 19.383 3.698 24.909-1.26c2.357-2.153 3.332-4.388 3.332-7.68c0-2.966-.366-4.266-1.91-6.501c-1.99-2.845-6.054-5.242-17.595-10.24c-13.206-5.69-18.895-9.224-24.096-14.832c-3.007-3.25-5.852-8.452-7.03-12.8c-.975-3.617-1.22-12.678-.447-16.335c2.723-12.76 12.353-21.659 26.25-24.3c4.51-.853 14.994-.528 19.424.569Z"></path></svg>

package/src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module 'pdfjs-dist' {
+    const pdfjsLib: any
+    export default pdfjsLib
+    export * from 'pdfjs-dist'
+}