fix: pdf预览懒加载可配置

fix: pdf重复渲染bug
doc:更新文档
2025-08-04 07:42:47 +08:00 · 2023-09-03 11:00:34 +08:00 · 2023-09-02 17:28:43 +08:00 · 2023-09-01 16:20:11 +08:00
41 changed files with 426 additions and 40 deletions
--- a/README.md
+++ b/README.md
@ -235,13 +235,15 @@ export default {

 <img src="https://501351981.github.io/vue-office/examples/dist/static/wx.png" alt="赞助二维码" width="260"/>

-<span style="color: red;">打赏的朋友欢迎**添加微信**</span>，交流前端开发中遇到的技术、问题和困惑。
+<span style="color: red;">打赏的朋友欢迎**添加微信**或者进入前端开发交流群</span>，交流前端开发中遇到的技术、问题和困惑。

 >【<span style="color:red;">**仅添加**打赏过的用户，不定期删除屏蔽朋友圈的好友</span>（为什么打赏了才能微信问问题？那别人为什么要先付出时间去解答你的问题？都是成年人了，人与人之间是价值交换，不是单向付出）】
 > [常见问题](https://501351981.github.io/vue-office/examples/docs/guide/faq.html)

 <img src="https://501351981.github.io/vue-office/examples/dist/static/wxqrcode.png" alt="个人微信" width="260"/>

+<img src="https://501351981.github.io/vue-office/examples/dist/static/qun.png" alt="前端群" width="260"/>
+

 ### 恳请各位大佬不吝点赞，开源不易，感谢支持~~

--- a/core/packages/js-pdf/index.d.ts
+++ b/core/packages/js-pdf/index.d.ts
@ -15,6 +15,7 @@ export interface Options {

 export interface JsPdfPreview {
    preview: (src: string | ArrayBuffer | Blob) => Promise<any>;
+    rerender: () => Promise<any>;
    save: (fileName?: string) => void;
    setOptions: (options: Options) => void;
    setRequestOptions: (requestOptions?: any) => void;
--- a/core/packages/js-pdf/package.json
+++ b/core/packages/js-pdf/package.json
@ -1,7 +1,7 @@
 {
  "name": "@js-preview/pdf",
  "type" :"module",
-  "version": "1.5.0",
+  "version": "1.5.2",
  "description": "",
  "main": "lib/index.js",
  "files": [
--- a/core/packages/js-pdf/src/main.js
+++ b/core/packages/js-pdf/src/main.js
@ -33,7 +33,11 @@ class JsPdfPreview{
        this.wrapperMain.setAttribute('style', 'background: gray; padding: 30px 0;position: relative;');
        this.wrapper.appendChild(this.wrapperMain);
    }
-    createCanvas(){
+    createCanvas(num){
+        let existCanvas = this.wrapperMain.querySelectorAll('canvas');
+        if(existCanvas[num -1]){
+            return [existCanvas[num -1], existCanvas[num -1].getContext('2d')];
+        }
        const canvas = document.createElement('canvas');
        canvas.setAttribute('style', 'width:100%');
        this.wrapperMain.appendChild(canvas);
@ -64,7 +68,7 @@ class JsPdfPreview{
        return this.pdfDocument.getPage(num).then((pdfPage) => {
            const viewport = pdfPage.getViewport({scale: 2});
            const outputScale = window.devicePixelRatio || 1;
-            let [canvas, ctx] = this.createCanvas();
+            let [canvas, ctx] = this.createCanvas(num);

            canvas.width = Math.floor(viewport.width * outputScale);
            canvas.height = Math.floor(viewport.height * outputScale);
@ -76,9 +80,10 @@ class JsPdfPreview{
                domWidth = Math.floor(this.options.width);
                domHeight = Math.floor(domHeight * scale);
            }
-            if(domWidth > document.documentElement.clientWidth){
-                let scale = document.documentElement.clientWidth / domWidth;
-                domWidth = Math.floor(document.documentElement.clientWidth);
+            let wrapperWidth = this.wrapperMain.getBoundingClientRect().width - 20;
+            if(domWidth > wrapperWidth){
+                let scale = wrapperWidth / domWidth;
+                domWidth = Math.floor(wrapperWidth);
                domHeight = Math.floor(domHeight * scale);
            }

@ -96,7 +101,7 @@ class JsPdfPreview{
            });
            return renderTask.promise.then(() => {
                if (this.pdfDocument.numPages > num) {
-                    this.renderSinglePage(num + 1);
+                    return this.renderSinglePage(num + 1);
                }
            });
        });
@ -104,6 +109,13 @@ class JsPdfPreview{
    renderPage(){
        if(!this.wrapperMain){
            this.createWrapperMain();
+        }else{
+            let canvas = this.wrapperMain.querySelectorAll('canvas');
+            if(canvas.length > this.pdfDocument.numPages){
+                for(let i = canvas.length-1; i >= this.pdfDocument.numPages; i--){
+                    this.wrapperMain.removeChild(canvas[i]);
+                }
+            }
        }
        return this.renderSinglePage(1);
    }
@ -145,6 +157,14 @@ class JsPdfPreview{
            });
        }));
    }
+    rerender(){
+        return this.renderPage().then(_=>{
+            return Promise.resolve();
+        }).catch(e=>{
+            this.clearAllCanvas();
+            return Promise.reject(e);
+        });
+    }
    save(fileName){
        this.pdfDocument && this.pdfDocument._transport && this.pdfDocument._transport.getData().then(fileData=>{
            downloadFile(fileName || `js-preview-pdf-${new Date().getTime()}.pdf`,fileData.buffer);
--- a/core/packages/vue-excel/package.json
+++ b/core/packages/vue-excel/package.json
@ -1,6 +1,6 @@
 {
  "name": "@vue-office/excel",
-  "version": "1.4.4",
+  "version": "1.4.5",
  "description": "",
  "main": "lib/index.js",
  "files": [
--- a/core/packages/vue-excel/src/main.vue
+++ b/core/packages/vue-excel/src/main.vue
@ -27,6 +27,7 @@ export default defineComponent({
    },
    emits: ['rendered', 'error'],
    setup(props, {emit}) {
+        console.log(props.options.transformData)
        const wrapperRef = ref(null);
        const rootRef = ref(null);
        let workbookDataSource = {
@ -45,7 +46,10 @@ export default defineComponent({
                if (!workbook._worksheets || workbook._worksheets.length === 0) {
                    throw new Error('未获取到数据，可能文件格式不正确或文件已损坏');
                }
-                const {workbookData, medias, workbookSource} = transferExcelToSpreadSheet(workbook, {...defaultOptions, ...props.options});
+                let {workbookData, medias, workbookSource} = transferExcelToSpreadSheet(workbook, {...defaultOptions, ...props.options});
+                if(props.options.transformData && typeof props.options.transformData === 'function' ){
+                    workbookData = props.options.transformData(workbookData);
+                }
                mediasSource = medias;
                workbookDataSource = workbookSource;
                offset = null;
--- a/core/packages/vue-pdf/index.d.ts
+++ b/core/packages/vue-pdf/index.d.ts
@ -1,6 +1,7 @@
 declare const VueOfficePdf: {
    install?: (vue: any) => void;
    src: string|ArrayBuffer|Blob;
+    rerender: () => any;
    staticFileUrl?: string,
    requestOptions?: any;
    options?: any
--- a/core/packages/vue-pdf/package.json
+++ b/core/packages/vue-pdf/package.json
@ -1,6 +1,6 @@
 {
  "name": "@vue-office/pdf",
-  "version": "1.5.1",
+  "version": "1.5.3",
  "description": "",
  "main": "lib/index.js",
  "files": [
--- a/core/packages/vue-pdf/src/main.vue
+++ b/core/packages/vue-pdf/src/main.vue
@ -30,6 +30,7 @@ export default defineComponent({
    setup(props, { emit }) {
        let pdfDocument = null;
        let loadingTask = null;
+        const wrapperRef = ref(null);
        const rootRef = ref([]);
        const numPages = ref(0);

@ -66,7 +67,7 @@ export default defineComponent({
            });
            loadingTask.promise.then((pdf) => {
                pdfDocument = pdf;
-                numPages.value = Math.min(pdfDocument.numPages, lazySize);
+                numPages.value = props.options.lazy ? Math.min(pdfDocument.numPages, lazySize) : pdfDocument.numPages;
                setTimeout(()=>{
                    renderPage(1);
                });
@ -76,6 +77,9 @@ export default defineComponent({
        }

        function onScrollPdf(e) {
+            if(!props.options.lazy){
+                return;
+            }
            const { scrollTop, scrollHeight, clientHeight } = e.target;
            if (scrollTop + clientHeight >= scrollHeight) {
              if (numPages.value >= pdfDocument.numPages) {
@ -107,9 +111,10 @@ export default defineComponent({
                    domWidth = Math.floor(props.options.width);
                    domHeight = Math.floor(domHeight * scale);
                }
-                if (domWidth > document.documentElement.clientWidth) {
-                    let scale = document.documentElement.clientWidth / domWidth;
-                    domWidth = Math.floor(document.documentElement.clientWidth);
+                let wrapperWidth = wrapperRef.value.getBoundingClientRect().width - 20;
+                if (domWidth > wrapperWidth) {
+                    let scale = wrapperWidth / domWidth;
+                    domWidth = Math.floor(wrapperWidth);
                    domHeight = Math.floor(domHeight * scale);
                }

@ -140,6 +145,9 @@ export default defineComponent({

        }

+        function rerender(){
+            renderPage(1);
+        }
        onMounted(() => {
            if (props.src) {
                checkPdfLib().then(init).catch(e => {
@ -159,10 +167,12 @@ export default defineComponent({
            });
        }
        return {
+            wrapperRef,
            rootRef,
            numPages,
            save,
-            onScrollPdf
+            onScrollPdf,
+            rerender
        };
    }
 });
@ -170,8 +180,9 @@ export default defineComponent({

 <template>
    <div class="vue-office-pdf" ref="vue-office-pdf" style="text-align: center;overflow-y: auto;" @scroll="onScrollPdf">
-        <div v-if="numPages" class="vue-office-pdf-wrapper" style="background: gray; padding: 30px 0;position: relative;">
+        <div v-if="numPages" ref="wrapperRef" class="vue-office-pdf-wrapper" style="background: gray; padding: 30px 0;position: relative;">
            <canvas v-for="page in numPages" ref="rootRef" :key="page" style="width:100%" />
+            <slot></slot>
        </div>
    </div>
 </template>
--- a/core/public/static/qun.png
+++ b/core/public/static/qun.png
--- a/core/src/components/ExcelDemo.vue
+++ b/core/src/components/ExcelDemo.vue
@ -3,7 +3,7 @@ import VueOfficeExcel from '../../packages/vue-excel/index';
 import '../../packages/vue-excel/src/index.css';
 import PreviewWrapper from '../common/PreviewWrapper.vue';
 import useLoading from '../hooks/useLoading.js';
-import {ref} from "vue";
+import {ref} from 'vue';
 function onRendered(){
    useLoading.hideLoading();
 }
@ -12,6 +12,11 @@ function onError(e){
    useLoading.hideLoading();
 }

+function transformData(data){
+    console.log('transformData', data);
+    return data;
+}
+
 const defaultSrc = location.origin +
    (location.pathname + '/').replace('//', '/')
    + 'static/test-files/test.xlsx';
@ -32,6 +37,7 @@ const docxRef = ref();
      <VueOfficeExcel
          ref="docxRef"
          :src="slotProps.src"
+          :options="{transformData}"
          style="flex: 1;height: 0"
          v-loading="true"
          @rendered="onRendered"
--- a/core/src/components/JsPdfDemo.vue
+++ b/core/src/components/JsPdfDemo.vue
@ -1,5 +1,5 @@
 <template>
-<div ref="dom" style="height: calc(100vh - 50px)">
+<div ref="dom" style="height: calc(100vh - 50px);">
    
 </div>
 </template>
@ -18,6 +18,7 @@ onMounted(() => {
        console.log('err',err);
    });

+
 });

 </script>
--- a/core/src/components/PdfDemo.vue
+++ b/core/src/components/PdfDemo.vue
@ -2,7 +2,7 @@
 import VueOfficePdf from '../../packages/vue-pdf/index';
 import PreviewWrapper from '../common/PreviewWrapper.vue';
 import useLoading from '../hooks/useLoading.js';
-import {ref} from "vue";
+import {ref} from 'vue';
 function onRendered(){
    useLoading.hideLoading();
 }
@ -15,6 +15,7 @@ const defaultSrc = location.origin +
    + 'static/test-files/test.pdf';
 const docxRef = ref();

+window.docxRef = docxRef;
 // setTimeout(()=>{
 //     console.log( docxRef.value.download());
 // }, 2000);
@ -31,10 +32,11 @@ const docxRef = ref();
          ref="docxRef"
          :src="slotProps.src"
          style="flex: 1;height: 0"
-          :options="{}"
+          :options="{lazy:true}"
          @rendered="onRendered"
          @error="onError"
-      />
+      >
+      </VueOfficePdf>
    </template>
  </PreviewWrapper>
 </template>
--- a/docs/config/index.md
+++ b/docs/config/index.md
@ -28,11 +28,17 @@ widthOffset：在默认渲染的列表宽度上再加10px宽

 heightOffset：在默认渲染的列表高度上再加10px高

+transformData：在预览之前可以通过transformData对即将渲染数据及样式进行修改
+
 ```javascript
 {
  "minColLength": 20,
  "widthOffset": 0, //在默认渲染的列表宽度上再加10px宽
  "heightOffset": 0, //在默认渲染的列表高度上再加10px高
+  "transformData": function (workbookData){
+      //修改workbookData
+      return workbookData;    
+  }
 }
 ```

--- a/examples/dist/assets/DocxDemo-86f4bcaf.js
+++ b/examples/dist/assets/DocxDemo-86f4bcaf.js
@ -0,0 +1 @@
+import{d as r}from"./docx-aeed7a99.js";import{d as x}from"./url-de9b02cf.js";import{d as m,_ as l,r as u,o as h,w as v,a as _,c as g,b as D,e as y,f as w,g as B,u as O}from"./index-f39b684b.js";import{P as R,u as f}from"./PreviewWrapper-959ef7d0.js";import"./_commonjs-dynamic-modules-302442b1.js";const $=m({name:"VueOfficeDocx",props:{src:[String,ArrayBuffer,Blob],requestOptions:{type:Object,default:()=>({})},options:{type:Object,default:()=>({})}},emits:["rendered","error"],setup(e,{emit:o}){const t=u(null);let n=null;function a(){let c=t.value;r.getData(e.src,e.requestOptions).then(async d=>{n=await r.getBlob(d),r.render(n,c,e.options).then(()=>{o("rendered")}).catch(p=>{r.render("",c,e.options),o("error",p)})}).catch(d=>{r.render("",c,e.options),o("error",d)})}h(()=>{e.src&&a()}),v(()=>e.src,()=>{e.src?a():r.render("",t.value,e.options).then(()=>{o("rendered")})});function s(c){x(c||`vue-office-docx-${new Date().getTime()}.docx`,n)}return{rootRef:t,save:s}}}),b={class:"vue-office-docx"},k={class:"vue-office-docx-main",ref:"rootRef"};function V(e,o,t,n,a,s){return _(),g("div",b,[D("div",k,null,512)])}const i=l($,[["render",V]]);i.install=function(e){e.component(i.name,i)};const E={__name:"DocxDemo",setup(e){function o(){f.hideLoading()}function t(s){console.log("出差",s),f.hideLoading()}const n=location.origin+(location.pathname+"/").replace("//","/")+"static/test-files/test.docx",a=u();return(s,c)=>(_(),y(R,{accept:".docx",placeholder:"请输入docx文件地址","default-src":n},{default:w(d=>[B(O(i),{ref_key:"docxRef",ref:a,src:d.src,style:{flex:"1",height:"0"},onRendered:o,onError:t},null,8,["src"])]),_:1}))}},P=l(E,[["__scopeId","data-v-637d9a60"]]);export{P as default};
--- a/examples/dist/assets/ExcelDemo-77b949f7.js
+++ b/examples/dist/assets/ExcelDemo-77b949f7.js
@ -0,0 +1 @@
+import{l as R,r as B,S as T,a as m,g as D,b as $,t as L,c as k}from"./hack-b5a6ddac.js";import{d as q}from"./url-de9b02cf.js";import{d as F,_ as V,r as p,o as W,n as j,h as I,w as M,a as y,c as N,b as P,i as A,e as H,f as U,j as z,g as G,u as J}from"./index-f39b684b.js";import{P as K,u as O}from"./PreviewWrapper-959ef7d0.js";import"./_commonjs-dynamic-modules-302442b1.js";const E={minColLength:20},Q=F({name:"VueOfficeExcel",props:{src:[String,ArrayBuffer,Blob],requestOptions:{type:Object,default:()=>({})},options:{type:Object,default:()=>({...E})}},emits:["rendered","error"],setup(t,{emit:f}){console.log(t.options.transformData);const c=p(null),s=p(null);let n={_worksheets:[]},r=[],o=0,d=null,e=null,l=null,w=null;function _(i){w=i,$(i).then(u=>{if(!u._worksheets||u._worksheets.length===0)throw new Error("未获取到数据，可能文件格式不正确或文件已损坏");let{workbookData:h,medias:g,workbookSource:a}=L(u,{...E,...t.options});t.options.transformData&&typeof t.options.transformData=="function"&&(h=t.options.transformData(h)),r=g,n=a,l=null,o=0,k(),e.loadData(h),m(d,r,n._worksheets[o],l),f("rendered")}).catch(u=>{console.warn(u),r=[],n={_worksheets:[]},k(),e&&e.loadData({}),f("error",u)})}const v=R.debounce(B,200).bind(this,s.value),b=new MutationObserver(v),S={attributes:!0,childList:!0,subtree:!0};W(()=>{j(()=>{b.observe(s.value,S),v(s),e=new T(s.value,{mode:"read",showToolbar:!1,showContextmenu:t.options.showContextmenu||!1,view:{height:()=>c.value&&c.value.clientHeight||300,width:()=>c.value&&c.value.clientWidth||1200},row:{height:24,len:100},col:{len:26,width:80,indexWidth:60,minWidth:60},autoFocus:!1}).loadData({});let i=e.bottombar.swapFunc;e.bottombar.swapFunc=function(a){i.call(e.bottombar,a),o=a,setTimeout(()=>{e.reRender(),m(d,r,n._worksheets[o],l)})};let u=e.sheet.editor.clear;e.sheet.editor.clear=function(...a){u.apply(e.sheet.editor,a),setTimeout(()=>{m(d,r,n._worksheets[o],l)})};let h=e.sheet.editor.setOffset;e.sheet.editor.setOffset=function(...a){h.apply(e.sheet.editor,a),l=a[0],m(d,r,n._worksheets[o],l)},d=s.value.querySelector("canvas").getContext("2d"),t.src&&D(t.src,t.requestOptions).then(_).catch(a=>{e.loadData({}),f("error",a)})})}),I(()=>{b.disconnect(),e=null}),M(()=>t.src,()=>{t.src?D(t.src,t.requestOptions).then(_).catch(i=>{e.loadData({}),f("error",i)}):e.loadData({})});function C(i){q(i||`vue-office-excel-${new Date().getTime()}.xlsx`,w)}return{wrapperRef:c,rootRef:s,save:C}}}),X={class:"vue-office-excel",ref:"wrapperRef"},Y={class:"vue-office-excel-main",ref:"rootRef"};function Z(t,f,c,s,n,r){return y(),N("div",X,[P("div",Y,null,512)],512)}const x=V(Q,[["render",Z]]);x.install=function(t){t.component(x.name,x)};const ne={__name:"ExcelDemo",setup(t){function f(){O.hideLoading()}function c(o){console.log("出差",o),O.hideLoading()}function s(o){return console.log("transformData",o),o}const n=location.origin+(location.pathname+"/").replace("//","/")+"static/test-files/test.xlsx",r=p();return(o,d)=>{const e=A("loading");return y(),H(K,{accept:".xlsx",placeholder:"请输入xlsx文件地址","default-src":n},{default:U(l=>[z(G(J(x),{ref_key:"docxRef",ref:r,src:l.src,options:{transformData:s},style:{flex:"1",height:"0"},onRendered:f,onError:c},null,8,["src","options"]),[[e,!0]])]),_:1})}}};export{ne as default};
--- a/examples/dist/assets/JsDocxDemo-6ba70605.js
+++ b/examples/dist/assets/JsDocxDemo-6ba70605.js
@ -0,0 +1 @@
+var p=Object.defineProperty;var c=(i,e,t)=>e in i?p(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t;var r=(i,e,t)=>(c(i,typeof e!="symbol"?e+"":e,t),t);import{d as n}from"./docx-aeed7a99.js";import{d as l}from"./url-de9b02cf.js";import{r as h,o as d,a as u,c as m}from"./index-f39b684b.js";import"./_commonjs-dynamic-modules-302442b1.js";class w{constructor(e,t={},s={}){r(this,"container",null);r(this,"wrapper",null);r(this,"wrapperMain",null);r(this,"options",{});r(this,"requestOptions",{});r(this,"fileData",null);this.container=e,this.options=t,this.requestOptions=s,this.createWrapper()}createWrapper(){this.wrapper=document.createElement("div"),this.wrapper.className="vue-office-docx",this.wrapperMain=document.createElement("div"),this.wrapperMain.className="vue-office-docx-main",this.wrapper.appendChild(this.wrapperMain),this.container.appendChild(this.wrapper)}setOptions(e){this.options=e}setRequestOptions(e){this.requestOptions=e}preview(e){return new Promise((t,s)=>{n.getData(e,this.requestOptions).then(async o=>{this.fileData=await n.getBlob(o),n.render(this.fileData,this.wrapperMain,this.options).then(()=>{t()}).catch(a=>{n.render("",this.wrapperMain,this.options),s(a)})}).catch(o=>{n.render("",this.wrapperMain,this.options),s(o)})})}save(e){l(e||`js-preview-docx-${new Date().getTime()}.docx`,this.fileData)}destroy(){this.container.removeChild(this.wrapper),this.container=null,this.wrapper=null,this.wrapperMain=null,this.options=null,this.requestOptions=null}}function f(i,e,t){return new w(i,e,t)}const v={init:f};const q={__name:"JsDocxDemo",setup(i){const e=h(null);return d(()=>{let t=v.init(e.value);t.preview("/vue-office/examples/dist/static/test-files/test.docx").then(s=>{console.log("docx preview done"),setTimeout(()=>{t.preview("/vue-office/examples/dist/static/test-files/test2.docx")},3e3)}).catch(s=>{console.log("err",s)})}),(t,s)=>(u(),m("div",{ref_key:"dom",ref:e},null,512))}};export{q as default};
--- a/examples/dist/assets/JsExcelDemo-0e41ae12.js
+++ b/examples/dist/assets/JsExcelDemo-0e41ae12.js
@ -0,0 +1 @@
+var c=Object.defineProperty;var p=(r,e,t)=>e in r?c(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t;var s=(r,e,t)=>(p(r,typeof e!="symbol"?e+"":e,t),t);import{S as u,a as n,b as d,t as w,c as l,l as x,r as m,g as f}from"./hack-b5a6ddac.js";import{d as k}from"./url-de9b02cf.js";/* empty css              */import{r as v,o as b,a as S,c as D}from"./index-f39b684b.js";import"./_commonjs-dynamic-modules-302442b1.js";const _={minColLength:20};class E{constructor(e,t={},i={}){s(this,"container",null);s(this,"wrapper",null);s(this,"wrapperMain",null);s(this,"options",{});s(this,"requestOptions",{});s(this,"mediasSource",[]);s(this,"workbookDataSource",{_worksheets:[]});s(this,"sheetIndex",1);s(this,"ctx",null);s(this,"xs",null);s(this,"offset",null);s(this,"observer",null);s(this,"fileData",null);this.container=e,this.options={..._,...t},this.requestOptions=i,this.createWrapper(),this.initSpreadsheet(),this.hack()}createWrapper(){this.wrapper=document.createElement("div"),this.wrapper.className="vue-office-excel",this.wrapperMain=document.createElement("div"),this.wrapperMain.className="vue-office-excel-main",this.wrapper.appendChild(this.wrapperMain),this.container.appendChild(this.wrapper)}initSpreadsheet(){this.xs=new u(this.wrapperMain,{mode:"read",showToolbar:!1,showContextmenu:this.options.showContextmenu||!1,view:{height:()=>this.wrapper&&this.wrapper.clientHeight||300,width:()=>this.wrapper&&this.wrapper.clientWidth||1200},row:{height:24,len:100},col:{len:26,width:80,indexWidth:60,minWidth:60},autoFocus:!1}).loadData({});let e=this,t=this.xs.bottombar.swapFunc;this.xs.bottombar.swapFunc=function(a){t.call(e.xs.bottombar,a),e.sheetIndex=a+1,setTimeout(()=>{e.xs.reRender(),n(e.ctx,e.mediasSource,e.workbookDataSource._worksheets[e.sheetIndex],e.offset)})};let i=this.xs.sheet.editor.clear;this.xs.sheet.editor.clear=function(...a){i.apply(e.xs.sheet.editor,a),setTimeout(()=>{n(e.ctx,e.mediasSource,e.workbookDataSource._worksheets[e.sheetIndex],e.offset)})};let o=this.xs.sheet.editor.setOffset;this.xs.sheet.editor.setOffset=function(...a){o.apply(e.xs.sheet.editor,a),e.offset=a[0],n(e.ctx,e.mediasSource,e.workbookDataSource._worksheets[e.sheetIndex],e.offset)};const h=this.wrapperMain.querySelector("canvas");this.ctx=h.getContext("2d")}renderExcel(e){return this.fileData=e,d(e).then(t=>{if(!t._worksheets||t._worksheets.length===0)throw new Error("未获取到数据，可能文件格式不正确或文件已损坏");const{workbookData:i,medias:o,workbookSource:h}=w(t,this.options);this.mediasSource=o,this.workbookDataSource=h,this.offset=null,this.sheetIndex=1,l(),this.xs.loadData(i),n(this.ctx,this.mediasSource,this.workbookDataSource._worksheets[this.sheetIndex],this.offset)}).catch(t=>(this.mediasSource=[],this.workbookDataSource={_worksheets:[]},l(),this.xs.loadData({}),Promise.reject(t)))}hack(){const e=x.debounce(m,200).bind(this,this.wrapperMain);this.observer=new MutationObserver(e);const t={attributes:!0,childList:!0,subtree:!0};this.observer.observe(this.wrapperMain,t),e(this.wrapperMain)}setOptions(e){this.options=e}setRequestOptions(e){this.requestOptions=e}preview(e){return new Promise((t,i)=>{f(e,this.requestOptions).then(o=>{this.renderExcel(o).then(t)}).catch(o=>{this.xs.loadData({}),i(o)})})}save(e){k(e||`js-preview-excel-${new Date().getTime()}.xlsx`,this.fileData)}destroy(){this.observer.disconnect(),this.container.removeChild(this.wrapper),this.container=null,this.wrapper=null,this.wrapperMain=null,this.ctx=null,this.xs=null,this.observer=null,this.options=null,this.requestOptions=null,this.mediasSource=null,this.workbookDataSource=null}}function g(r,e,t){return new E(r,e,t)}const O={init:g},T={__name:"JsExcelDemo",setup(r){const e=v(null);return b(()=>{window.myExcelPreview=O.init(e.value,{}),window.myExcelPreview.preview("/vue-office/examples/dist/static/test-files/test.xlsx").then(t=>{console.log("excel preview done",window.myExcelPreview)}).catch(t=>{console.log("err",t)})}),(t,i)=>(S(),D("div",{ref_key:"dom",ref:e,style:{height:"calc(100vh - 50px)"}},null,512))}};export{T as default};
--- a/examples/dist/assets/JsPdfDemo-75f28a19.js
+++ b/examples/dist/assets/JsPdfDemo-75f28a19.js
--- a/examples/dist/assets/PdfDemo-893c77d9.js
+++ b/examples/dist/assets/PdfDemo-893c77d9.js
--- a/examples/dist/assets/PreviewWrapper-959ef7d0.js
+++ b/examples/dist/assets/PreviewWrapper-959ef7d0.js
@ -0,0 +1 @@
+import{r as d,p as C,_ as I,w as N,q as l,a as p,c as x,u as t,g as i,f as n,s as v,t as S,e as y,m,l as V,v as W,x as A,b as R}from"./index-f39b684b.js";function T(e){const s=d("url"),a=d(e),r=d(e),u=d([]);function b(w){let c=new FileReader;return c.onload=o=>{let _=o.target.result;r.value=_},c.readAsArrayBuffer(w),!1}return{type:s,inputSrc:a,src:r,fileList:u,beforeUpload:b}}let g=d(!1),k;function $(e){k=C.loading(e,0),g.value=!0}function q(){g.value===!0&&(k(),g.value=!1)}const E={loading:g,showLoading:$,hideLoading:q};function F(){return location.href.includes("test")}const j=e=>(W("data-v-6e0b6946"),e=e(),A(),e),z={class:"preview-wrapper"},D={key:0,class:"operate-area"},G=j(()=>R("div",{class:"preview-wrapper-main"},null,-1)),H={__name:"PreviewWrapper",props:{accept:String,placeholder:String,defaultSrc:String},setup(e){const s=e,{type:a,inputSrc:r,src:u,fileList:b,beforeUpload:w}=T(s.defaultSrc);return N(u,()=>{E.showLoading()},{immediate:!0}),(c,o)=>{const _=l("a-radio-button"),B=l("a-radio-group"),L=l("a-input"),h=l("a-button"),U=l("upload-outlined"),P=l("a-upload");return p(),x("div",z,[t(F)()?m("",!0):(p(),x("div",D,[i(B,{value:t(a),"onUpdate:value":o[0]||(o[0]=f=>S(a)?a.value=f:null),"button-style":"solid"},{default:n(()=>[i(_,{value:"url"},{default:n(()=>[v("远程文件地址")]),_:1}),i(_,{value:"upload"},{default:n(()=>[v("上传本地文件")]),_:1})]),_:1},8,["value"]),t(a)==="url"?(p(),y(L,{key:0,value:t(r),"onUpdate:value":o[1]||(o[1]=f=>S(r)?r.value=f:null),placeholder:s.placeholder,style:{width:"600px","margin-left":"10px"}},null,8,["value","placeholder"])):m("",!0),t(a)==="url"?(p(),y(h,{key:1,type:"primary",style:{"margin-left":"10px"},onClick:o[2]||(o[2]=f=>u.value=t(r))},{default:n(()=>[v(" 预览 ")]),_:1})):m("",!0),t(a)!=="url"?(p(),y(P,{key:2,accept:s.accept,action:"",beforeUpload:t(w),"file-list":[]},{default:n(()=>[i(h,{style:{"margin-left":"10px"}},{default:n(()=>[i(U),v(" 选择文件 ")]),_:1})]),_:1},8,["accept","beforeUpload"])):m("",!0)])),V(c.$slots,"default",{src:t(u)},void 0,!0),G])}}},K=I(H,[["__scopeId","data-v-6e0b6946"]]);export{K as P,E as u};
--- a/examples/dist/assets/docx-aeed7a99.js
+++ b/examples/dist/assets/docx-aeed7a99.js
--- a/examples/dist/assets/hack-b5a6ddac.js
+++ b/examples/dist/assets/hack-b5a6ddac.js
--- a/examples/dist/assets/index-f39b684b.js
+++ b/examples/dist/assets/index-f39b684b.js
--- a/examples/dist/assets/omit-2b5770e7.js
+++ b/examples/dist/assets/omit-2b5770e7.js
--- a/examples/dist/index.html
+++ b/examples/dist/index.html
@ -7,7 +7,7 @@
          content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>@vue-office演示demo</title>
-    <script type="module" crossorigin src="/vue-office/examples/dist/assets/index-a8832933.js"></script>
+    <script type="module" crossorigin src="/vue-office/examples/dist/assets/index-f39b684b.js"></script>
    <link rel="stylesheet" href="/vue-office/examples/dist/assets/index-cc8fb346.css">
  </head>
  <body>
--- a/examples/dist/static/qun.png
+++ b/examples/dist/static/qun.png
--- a/examples/docs/404.html
+++ b/examples/docs/404.html
--- a/examples/docs/assets/config_index.md.5eca9ef5.js
+++ b/examples/docs/assets/config_index.md.5eca9ef5.js
@ -1,7 +1,11 @@
-import{_ as s,c as a,o as n,O as l}from"./chunks/framework.935eb42c.js";const C=JSON.parse('{"title":"属性","description":"","frontmatter":{},"headers":[],"relativePath":"config/index.md"}'),o={name:"config/index.md"},p=l(`<h1 id="属性" tabindex="-1">属性 <a class="header-anchor" href="#属性" aria-label="Permalink to &quot;属性&quot;"></a></h1><h2 id="src" tabindex="-1">src <a class="header-anchor" href="#src" aria-label="Permalink to &quot;src&quot;"></a></h2><ul><li>类型：String, ArrayBuffer, Blob</li></ul><p>文档地址，文件在CDN或服务器上的地址，或者是通过FileReader读取的文件ArrayBuffer或者Blob格式。</p><h2 id="request-options" tabindex="-1">request-options <a class="header-anchor" href="#request-options" aria-label="Permalink to &quot;request-options&quot;"></a></h2><ul><li>类型：Object</li></ul><p>如果属性src是个文件地址，组件内部会通过window.fetch进行请求，对应window.fetch的请求参数，可以用来设置header等请求信息。</p><h2 id="options" tabindex="-1">options <a class="header-anchor" href="#options" aria-label="Permalink to &quot;options&quot;"></a></h2><ul><li>类型： Object</li></ul><p>预览需要的一些特殊配置，不同预览组件可配置项各不相同。</p><ul><li>excel预览</li></ul><p>excel相关的配置，目前支持配置项很少。</p><p>minColLength: excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.</p><p>widthOffset：在默认渲染的列表宽度上再加10px宽</p><p>heightOffset：在默认渲染的列表高度上再加10px高</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
+import{_ as s,c as a,o as n,O as l}from"./chunks/framework.935eb42c.js";const d=JSON.parse('{"title":"属性","description":"","frontmatter":{},"headers":[],"relativePath":"config/index.md"}'),o={name:"config/index.md"},p=l(`<h1 id="属性" tabindex="-1">属性 <a class="header-anchor" href="#属性" aria-label="Permalink to &quot;属性&quot;"></a></h1><h2 id="src" tabindex="-1">src <a class="header-anchor" href="#src" aria-label="Permalink to &quot;src&quot;"></a></h2><ul><li>类型：String, ArrayBuffer, Blob</li></ul><p>文档地址，文件在CDN或服务器上的地址，或者是通过FileReader读取的文件ArrayBuffer或者Blob格式。</p><h2 id="request-options" tabindex="-1">request-options <a class="header-anchor" href="#request-options" aria-label="Permalink to &quot;request-options&quot;"></a></h2><ul><li>类型：Object</li></ul><p>如果属性src是个文件地址，组件内部会通过window.fetch进行请求，对应window.fetch的请求参数，可以用来设置header等请求信息。</p><h2 id="options" tabindex="-1">options <a class="header-anchor" href="#options" aria-label="Permalink to &quot;options&quot;"></a></h2><ul><li>类型： Object</li></ul><p>预览需要的一些特殊配置，不同预览组件可配置项各不相同。</p><ul><li>excel预览</li></ul><p>excel相关的配置，目前支持配置项很少。</p><p>minColLength: excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.</p><p>widthOffset：在默认渲染的列表宽度上再加10px宽</p><p>heightOffset：在默认渲染的列表高度上再加10px高</p><p>transformData：在预览之前可以通过transformData对即将渲染数据及样式进行修改</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">minColLength</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">: </span><span style="color:#F78C6C;">20</span><span style="color:#89DDFF;">,</span></span>
 <span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">widthOffset</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">: </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//在默认渲染的列表宽度上再加10px宽</span></span>
 <span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">heightOffset</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">: </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//在默认渲染的列表高度上再加10px高</span></span>
+<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">transformData</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">: </span><span style="color:#C792EA;">function</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">workbookData</span><span style="color:#89DDFF;">){</span></span>
+<span class="line"><span style="color:#89DDFF;">      </span><span style="color:#676E95;font-style:italic;">//修改workbookData</span></span>
+<span class="line"><span style="color:#F07178;">      </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">workbookData</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;">    </span></span>
+<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
 <span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><ul><li>docx预览</li></ul><p>docx预览组件支持的可配置项如下</p><div class="language-typescript"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#F07178;">    </span><span style="color:#FFCB6B;">className</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">string</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">docx</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//class name/prefix for default and document style classes</span></span>
 <span class="line"><span style="color:#F07178;">    </span><span style="color:#FFCB6B;">inWrapper</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">boolean</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//enables rendering of wrapper around document content</span></span>
@ -21,4 +25,4 @@ import{_ as s,c as a,o as n,O as l}from"./chunks/framework.935eb42c.js";const C=
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">httpHeaders</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{},</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//object, Basic authentication headers</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">password</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//string, 加密pdf的密码</span></span>
 <span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">//更多配置参见 https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html</span></span>
-<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="staticfileurl-pdf特有属性" tabindex="-1">staticFileUrl [pdf特有属性] <a class="header-anchor" href="#staticfileurl-pdf特有属性" aria-label="Permalink to &quot;staticFileUrl [pdf特有属性]&quot;"></a></h2><ul><li>类型： String</li></ul><p>pdf渲染时可能会请求一些bcmap文件，这些文件默认从 <a href="https://unpkg.com/pdfjs-dist@3.1.81/" target="_blank" rel="noreferrer">https://unpkg.com/pdfjs-dist@3.1.81/</a> 加载，但是可能存在网络不通问题，如果遇到这种问题，可以将这些文件放到自己静态目录，然后修改该属性，告诉组件去这里请求bcmap文件。</p><p>涉及的文件存放在当前github项目中examples/public/cmaps目录下，可将cmaps目录复制到你的静态服务目录下，然后修改staticFileUrl为cmaps文件夹对应的父地址，必须已http或https开头，如 <a href="http://yourdomain/static/" target="_blank" rel="noreferrer">http://yourdomain/static/</a></p>`,26),e=[p];function t(c,r,F,y,i,D){return n(),a("div",null,e)}const f=s(o,[["render",t]]);export{C as __pageData,f as default};
+<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="staticfileurl-pdf特有属性" tabindex="-1">staticFileUrl [pdf特有属性] <a class="header-anchor" href="#staticfileurl-pdf特有属性" aria-label="Permalink to &quot;staticFileUrl [pdf特有属性]&quot;"></a></h2><ul><li>类型： String</li></ul><p>pdf渲染时可能会请求一些bcmap文件，这些文件默认从 <a href="https://unpkg.com/pdfjs-dist@3.1.81/" target="_blank" rel="noreferrer">https://unpkg.com/pdfjs-dist@3.1.81/</a> 加载，但是可能存在网络不通问题，如果遇到这种问题，可以将这些文件放到自己静态目录，然后修改该属性，告诉组件去这里请求bcmap文件。</p><p>涉及的文件存放在当前github项目中examples/public/cmaps目录下，可将cmaps目录复制到你的静态服务目录下，然后修改staticFileUrl为cmaps文件夹对应的父地址，必须已http或https开头，如 <a href="http://yourdomain/static/" target="_blank" rel="noreferrer">http://yourdomain/static/</a></p>`,27),e=[p];function t(r,c,F,y,i,D){return n(),a("div",null,e)}const f=s(o,[["render",t]]);export{d as __pageData,f as default};
--- a/examples/docs/assets/config_index.md.5eca9ef5.lean.js
+++ b/examples/docs/assets/config_index.md.5eca9ef5.lean.js
@ -1 +1 @@
-import{_ as s,c as a,o as n,O as l}from"./chunks/framework.935eb42c.js";const C=JSON.parse('{"title":"属性","description":"","frontmatter":{},"headers":[],"relativePath":"config/index.md"}'),o={name:"config/index.md"},p=l("",26),e=[p];function t(c,r,F,y,i,D){return n(),a("div",null,e)}const f=s(o,[["render",t]]);export{C as __pageData,f as default};
+import{_ as s,c as a,o as n,O as l}from"./chunks/framework.935eb42c.js";const d=JSON.parse('{"title":"属性","description":"","frontmatter":{},"headers":[],"relativePath":"config/index.md"}'),o={name:"config/index.md"},p=l("",27),e=[p];function t(r,c,F,y,i,D){return n(),a("div",null,e)}const f=s(o,[["render",t]]);export{d as __pageData,f as default};
--- a/examples/docs/config/event.html
+++ b/examples/docs/config/event.html
--- a/examples/docs/config/index.html
+++ b/examples/docs/config/index.html
--- a/examples/docs/guide/contact.html
+++ b/examples/docs/guide/contact.html
--- a/examples/docs/guide/faq.html
+++ b/examples/docs/guide/faq.html
@ -40,7 +40,7 @@
 <span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C792EA;">vue</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">2.6.10</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
 <span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C792EA;">vue-template-compiler</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">2.6.10</span><span style="color:#89DDFF;">&quot;</span></span>
 <span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><p>删除 package-lock.json 文件 和 node_modules中的全部包。</p><p>重新安装所有依赖，然后运行查看效果。</p></div></div></main><footer class="VPDocFooter" data-v-76ac46f7 data-v-a9a244d8><!--[--><!--]--><!----><div class="prev-next" data-v-a9a244d8><div class="pager" data-v-a9a244d8><a class="pager-link prev" href="/vue-office/examples/docs/guide/js-preview.html" data-v-a9a244d8><span class="desc" data-v-a9a244d8>上一页</span><span class="title" data-v-a9a244d8>非Vue框架进行文件预览</span></a></div><div class="has-prev pager" data-v-a9a244d8><a class="pager-link next" href="/vue-office/examples/docs/guide/contact.html" data-v-a9a244d8><span class="desc" data-v-a9a244d8>下一页</span><span class="title" data-v-a9a244d8>联系我</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_preview-docx.md\":\"747caaea\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_js-preview.md\":\"d8c75dcf\",\"guide_contact.md\":\"10c84e73\",\"config_event.md\":\"cbedfdd0\",\"guide_preview-pdf.md\":\"9bd426ea\",\"config_index.md\":\"4b837d8d\",\"index.md\":\"2dfe7e9d\",\"guide_index.md\":\"59f780b1\",\"guide_faq.md\":\"fc7d1e4f\"}")
+    <script>__VP_HASH_MAP__ = JSON.parse("{\"config_event.md\":\"cbedfdd0\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"guide_contact.md\":\"10c84e73\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_index.md\":\"59f780b1\",\"config_index.md\":\"5eca9ef5\",\"guide_js-preview.md\":\"d8c75dcf\",\"guide_faq.md\":\"fc7d1e4f\"}")
 __VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vue-office\",\"description\":\"更简单的office文件预览\",\"base\":\"/vue-office/examples/docs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"指南\",\"link\":\"/guide/\"},{\"text\":\"配置参考\",\"link\":\"/config/\"},{\"text\":\"演示预览效果\",\"link\":\"https://501351981.github.io/vue-office/examples/dist/\"}],\"outlineTitle\":\"跳转到\",\"docFooter\":{\"next\":\"下一页\",\"prev\":\"上一页\"},\"sidebar\":{\"/guide\":[{\"text\":\"指南\",\"items\":[{\"text\":\"快速上手\",\"link\":\"/guide/\"},{\"text\":\"docx文件预览\",\"link\":\"/guide/preview-docx\"},{\"text\":\"xlsx文件预览\",\"link\":\"/guide/preview-xlsx\"},{\"text\":\"pdf文件预览\",\"link\":\"/guide/preview-pdf\"},{\"text\":\"非Vue框架进行文件预览\",\"link\":\"/guide/js-preview\"},{\"text\":\"常见问题\",\"link\":\"/guide/faq\"},{\"text\":\"联系我\",\"link\":\"/guide/contact\"}]}],\"/config\":[{\"text\":\"配置参考\",\"items\":[{\"text\":\"属性\",\"link\":\"/config/\"},{\"text\":\"事件\",\"link\":\"/config/event\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/501351981/vue-office\"}]},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
    
  </body>
--- a/examples/docs/guide/index.html
+++ b/examples/docs/guide/index.html
@ -128,7 +128,7 @@
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
 <span class="line"><span style="color:#89DDFF;">}</span></span>
 <span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-76ac46f7 data-v-a9a244d8><!--[--><!--]--><!----><div class="prev-next" data-v-a9a244d8><div class="pager" data-v-a9a244d8><!----></div><div class="pager" data-v-a9a244d8><a class="pager-link next" href="/vue-office/examples/docs/guide/preview-docx.html" data-v-a9a244d8><span class="desc" data-v-a9a244d8>下一页</span><span class="title" data-v-a9a244d8>docx文件预览</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_preview-docx.md\":\"747caaea\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_js-preview.md\":\"d8c75dcf\",\"guide_contact.md\":\"10c84e73\",\"config_event.md\":\"cbedfdd0\",\"guide_preview-pdf.md\":\"9bd426ea\",\"config_index.md\":\"4b837d8d\",\"index.md\":\"2dfe7e9d\",\"guide_index.md\":\"59f780b1\",\"guide_faq.md\":\"fc7d1e4f\"}")
+    <script>__VP_HASH_MAP__ = JSON.parse("{\"config_event.md\":\"cbedfdd0\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"guide_contact.md\":\"10c84e73\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_index.md\":\"59f780b1\",\"config_index.md\":\"5eca9ef5\",\"guide_js-preview.md\":\"d8c75dcf\",\"guide_faq.md\":\"fc7d1e4f\"}")
 __VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vue-office\",\"description\":\"更简单的office文件预览\",\"base\":\"/vue-office/examples/docs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"指南\",\"link\":\"/guide/\"},{\"text\":\"配置参考\",\"link\":\"/config/\"},{\"text\":\"演示预览效果\",\"link\":\"https://501351981.github.io/vue-office/examples/dist/\"}],\"outlineTitle\":\"跳转到\",\"docFooter\":{\"next\":\"下一页\",\"prev\":\"上一页\"},\"sidebar\":{\"/guide\":[{\"text\":\"指南\",\"items\":[{\"text\":\"快速上手\",\"link\":\"/guide/\"},{\"text\":\"docx文件预览\",\"link\":\"/guide/preview-docx\"},{\"text\":\"xlsx文件预览\",\"link\":\"/guide/preview-xlsx\"},{\"text\":\"pdf文件预览\",\"link\":\"/guide/preview-pdf\"},{\"text\":\"非Vue框架进行文件预览\",\"link\":\"/guide/js-preview\"},{\"text\":\"常见问题\",\"link\":\"/guide/faq\"},{\"text\":\"联系我\",\"link\":\"/guide/contact\"}]}],\"/config\":[{\"text\":\"配置参考\",\"items\":[{\"text\":\"属性\",\"link\":\"/config/\"},{\"text\":\"事件\",\"link\":\"/config/event\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/501351981/vue-office\"}]},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
    
  </body>
--- a/examples/docs/guide/js-preview.html
+++ b/examples/docs/guide/js-preview.html
@ -78,7 +78,7 @@
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">CMapReaderFactory</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Object</span><span style="color:#89DDFF;">;</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">useSystemFonts</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">;</span></span>
 <span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="preview方法" tabindex="-1">preview方法 <a class="header-anchor" href="#preview方法" aria-label="Permalink to &quot;preview方法&quot;"></a></h3><p>调用preview方法进行文件的预览。</p><p>preview方法接收参数支持三种： 文件url地址、文件ArrayBuffer格式数据、文件blob格式。</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">preview</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">src</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">ArrayBuffer</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Blob</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Promise</span><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;">any</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><p>url格式适合有文件静态地址的情况，ArrayBuffer格式适合文件上传前的预览。</p><h3 id="save方法" tabindex="-1">save方法 <a class="header-anchor" href="#save方法" aria-label="Permalink to &quot;save方法&quot;"></a></h3><p>调用save进行文件下载，参数名为下载的文件名称，可不传。</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">save</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">fileName</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">void;</span></span></code></pre></div><h3 id="destroy方法" tabindex="-1">destroy方法 <a class="header-anchor" href="#destroy方法" aria-label="Permalink to &quot;destroy方法&quot;"></a></h3><p>卸载方法，可以在组件销毁前调用预览对象的卸载方法，避免长期使用造成内存泄露。</p><h2 id="如果该项目帮助了您-还请您不吝点赞" tabindex="-1">如果该项目帮助了您，还请您不吝点赞 <a class="header-anchor" href="#如果该项目帮助了您-还请您不吝点赞" aria-label="Permalink to &quot;如果该项目帮助了您，还请您不吝点赞&quot;"></a></h2></div></div></main><footer class="VPDocFooter" data-v-76ac46f7 data-v-a9a244d8><!--[--><!--]--><!----><div class="prev-next" data-v-a9a244d8><div class="pager" data-v-a9a244d8><a class="pager-link prev" href="/vue-office/examples/docs/guide/preview-pdf.html" data-v-a9a244d8><span class="desc" data-v-a9a244d8>上一页</span><span class="title" data-v-a9a244d8>pdf文件预览</span></a></div><div class="has-prev pager" data-v-a9a244d8><a class="pager-link next" href="/vue-office/examples/docs/guide/faq.html" data-v-a9a244d8><span class="desc" data-v-a9a244d8>下一页</span><span class="title" data-v-a9a244d8>常见问题</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_preview-docx.md\":\"747caaea\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_js-preview.md\":\"d8c75dcf\",\"guide_contact.md\":\"10c84e73\",\"config_event.md\":\"cbedfdd0\",\"guide_preview-pdf.md\":\"9bd426ea\",\"config_index.md\":\"4b837d8d\",\"index.md\":\"2dfe7e9d\",\"guide_index.md\":\"59f780b1\",\"guide_faq.md\":\"fc7d1e4f\"}")
+    <script>__VP_HASH_MAP__ = JSON.parse("{\"config_event.md\":\"cbedfdd0\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"guide_contact.md\":\"10c84e73\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_index.md\":\"59f780b1\",\"config_index.md\":\"5eca9ef5\",\"guide_js-preview.md\":\"d8c75dcf\",\"guide_faq.md\":\"fc7d1e4f\"}")
 __VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vue-office\",\"description\":\"更简单的office文件预览\",\"base\":\"/vue-office/examples/docs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"指南\",\"link\":\"/guide/\"},{\"text\":\"配置参考\",\"link\":\"/config/\"},{\"text\":\"演示预览效果\",\"link\":\"https://501351981.github.io/vue-office/examples/dist/\"}],\"outlineTitle\":\"跳转到\",\"docFooter\":{\"next\":\"下一页\",\"prev\":\"上一页\"},\"sidebar\":{\"/guide\":[{\"text\":\"指南\",\"items\":[{\"text\":\"快速上手\",\"link\":\"/guide/\"},{\"text\":\"docx文件预览\",\"link\":\"/guide/preview-docx\"},{\"text\":\"xlsx文件预览\",\"link\":\"/guide/preview-xlsx\"},{\"text\":\"pdf文件预览\",\"link\":\"/guide/preview-pdf\"},{\"text\":\"非Vue框架进行文件预览\",\"link\":\"/guide/js-preview\"},{\"text\":\"常见问题\",\"link\":\"/guide/faq\"},{\"text\":\"联系我\",\"link\":\"/guide/contact\"}]}],\"/config\":[{\"text\":\"配置参考\",\"items\":[{\"text\":\"属性\",\"link\":\"/config/\"},{\"text\":\"事件\",\"link\":\"/config/event\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/501351981/vue-office\"}]},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
    
  </body>
--- a/examples/docs/guide/preview-docx.html
+++ b/examples/docs/guide/preview-docx.html
@ -121,7 +121,7 @@
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
 <span class="line"><span style="color:#89DDFF;">}</span></span>
 <span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-76ac46f7 data-v-a9a244d8><!--[--><!--]--><!----><div class="prev-next" data-v-a9a244d8><div class="pager" data-v-a9a244d8><a class="pager-link prev" href="/vue-office/examples/docs/guide/" data-v-a9a244d8><span class="desc" data-v-a9a244d8>上一页</span><span class="title" data-v-a9a244d8>快速上手</span></a></div><div class="has-prev pager" data-v-a9a244d8><a class="pager-link next" href="/vue-office/examples/docs/guide/preview-xlsx.html" data-v-a9a244d8><span class="desc" data-v-a9a244d8>下一页</span><span class="title" data-v-a9a244d8>xlsx文件预览</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_preview-docx.md\":\"747caaea\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_js-preview.md\":\"d8c75dcf\",\"guide_contact.md\":\"10c84e73\",\"config_event.md\":\"cbedfdd0\",\"guide_preview-pdf.md\":\"9bd426ea\",\"config_index.md\":\"4b837d8d\",\"index.md\":\"2dfe7e9d\",\"guide_index.md\":\"59f780b1\",\"guide_faq.md\":\"fc7d1e4f\"}")
+    <script>__VP_HASH_MAP__ = JSON.parse("{\"config_event.md\":\"cbedfdd0\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"guide_contact.md\":\"10c84e73\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_index.md\":\"59f780b1\",\"config_index.md\":\"5eca9ef5\",\"guide_js-preview.md\":\"d8c75dcf\",\"guide_faq.md\":\"fc7d1e4f\"}")
 __VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vue-office\",\"description\":\"更简单的office文件预览\",\"base\":\"/vue-office/examples/docs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"指南\",\"link\":\"/guide/\"},{\"text\":\"配置参考\",\"link\":\"/config/\"},{\"text\":\"演示预览效果\",\"link\":\"https://501351981.github.io/vue-office/examples/dist/\"}],\"outlineTitle\":\"跳转到\",\"docFooter\":{\"next\":\"下一页\",\"prev\":\"上一页\"},\"sidebar\":{\"/guide\":[{\"text\":\"指南\",\"items\":[{\"text\":\"快速上手\",\"link\":\"/guide/\"},{\"text\":\"docx文件预览\",\"link\":\"/guide/preview-docx\"},{\"text\":\"xlsx文件预览\",\"link\":\"/guide/preview-xlsx\"},{\"text\":\"pdf文件预览\",\"link\":\"/guide/preview-pdf\"},{\"text\":\"非Vue框架进行文件预览\",\"link\":\"/guide/js-preview\"},{\"text\":\"常见问题\",\"link\":\"/guide/faq\"},{\"text\":\"联系我\",\"link\":\"/guide/contact\"}]}],\"/config\":[{\"text\":\"配置参考\",\"items\":[{\"text\":\"属性\",\"link\":\"/config/\"},{\"text\":\"事件\",\"link\":\"/config/event\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/501351981/vue-office\"}]},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
    
  </body>
--- a/examples/docs/guide/preview-pdf.html
+++ b/examples/docs/guide/preview-pdf.html
@ -45,7 +45,7 @@
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
 <span class="line"><span style="color:#89DDFF;">}</span></span>
 <span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><h2 id="上传文件预览" tabindex="-1">上传文件预览 <a class="header-anchor" href="#上传文件预览" aria-label="Permalink to &quot;上传文件预览&quot;"></a></h2><p>和docx的上传文件预览一样，获取文件的ArrayBuffer，传给组件的src属性。</p></div></div></main><footer class="VPDocFooter" data-v-76ac46f7 data-v-a9a244d8><!--[--><!--]--><!----><div class="prev-next" data-v-a9a244d8><div class="pager" data-v-a9a244d8><a class="pager-link prev" href="/vue-office/examples/docs/guide/preview-xlsx.html" data-v-a9a244d8><span class="desc" data-v-a9a244d8>上一页</span><span class="title" data-v-a9a244d8>xlsx文件预览</span></a></div><div class="has-prev pager" data-v-a9a244d8><a class="pager-link next" href="/vue-office/examples/docs/guide/js-preview.html" data-v-a9a244d8><span class="desc" data-v-a9a244d8>下一页</span><span class="title" data-v-a9a244d8>非Vue框架进行文件预览</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_preview-docx.md\":\"747caaea\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_js-preview.md\":\"d8c75dcf\",\"guide_contact.md\":\"10c84e73\",\"config_event.md\":\"cbedfdd0\",\"guide_preview-pdf.md\":\"9bd426ea\",\"config_index.md\":\"4b837d8d\",\"index.md\":\"2dfe7e9d\",\"guide_index.md\":\"59f780b1\",\"guide_faq.md\":\"fc7d1e4f\"}")
+    <script>__VP_HASH_MAP__ = JSON.parse("{\"config_event.md\":\"cbedfdd0\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"guide_contact.md\":\"10c84e73\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_index.md\":\"59f780b1\",\"config_index.md\":\"5eca9ef5\",\"guide_js-preview.md\":\"d8c75dcf\",\"guide_faq.md\":\"fc7d1e4f\"}")
 __VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vue-office\",\"description\":\"更简单的office文件预览\",\"base\":\"/vue-office/examples/docs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"指南\",\"link\":\"/guide/\"},{\"text\":\"配置参考\",\"link\":\"/config/\"},{\"text\":\"演示预览效果\",\"link\":\"https://501351981.github.io/vue-office/examples/dist/\"}],\"outlineTitle\":\"跳转到\",\"docFooter\":{\"next\":\"下一页\",\"prev\":\"上一页\"},\"sidebar\":{\"/guide\":[{\"text\":\"指南\",\"items\":[{\"text\":\"快速上手\",\"link\":\"/guide/\"},{\"text\":\"docx文件预览\",\"link\":\"/guide/preview-docx\"},{\"text\":\"xlsx文件预览\",\"link\":\"/guide/preview-xlsx\"},{\"text\":\"pdf文件预览\",\"link\":\"/guide/preview-pdf\"},{\"text\":\"非Vue框架进行文件预览\",\"link\":\"/guide/js-preview\"},{\"text\":\"常见问题\",\"link\":\"/guide/faq\"},{\"text\":\"联系我\",\"link\":\"/guide/contact\"}]}],\"/config\":[{\"text\":\"配置参考\",\"items\":[{\"text\":\"属性\",\"link\":\"/config/\"},{\"text\":\"事件\",\"link\":\"/config/event\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/501351981/vue-office\"}]},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
    
  </body>
--- a/examples/docs/guide/preview-xlsx.html
+++ b/examples/docs/guide/preview-xlsx.html
@ -48,7 +48,7 @@
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
 <span class="line"><span style="color:#89DDFF;">}</span></span>
 <span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><h2 id="上传文件预览" tabindex="-1">上传文件预览 <a class="header-anchor" href="#上传文件预览" aria-label="Permalink to &quot;上传文件预览&quot;"></a></h2><p>和docx的上传文件预览一样，获取文件的ArrayBuffer，传给组件的src属性。</p></div></div></main><footer class="VPDocFooter" data-v-76ac46f7 data-v-a9a244d8><!--[--><!--]--><!----><div class="prev-next" data-v-a9a244d8><div class="pager" data-v-a9a244d8><a class="pager-link prev" href="/vue-office/examples/docs/guide/preview-docx.html" data-v-a9a244d8><span class="desc" data-v-a9a244d8>上一页</span><span class="title" data-v-a9a244d8>docx文件预览</span></a></div><div class="has-prev pager" data-v-a9a244d8><a class="pager-link next" href="/vue-office/examples/docs/guide/preview-pdf.html" data-v-a9a244d8><span class="desc" data-v-a9a244d8>下一页</span><span class="title" data-v-a9a244d8>pdf文件预览</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_preview-docx.md\":\"747caaea\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_js-preview.md\":\"d8c75dcf\",\"guide_contact.md\":\"10c84e73\",\"config_event.md\":\"cbedfdd0\",\"guide_preview-pdf.md\":\"9bd426ea\",\"config_index.md\":\"4b837d8d\",\"index.md\":\"2dfe7e9d\",\"guide_index.md\":\"59f780b1\",\"guide_faq.md\":\"fc7d1e4f\"}")
+    <script>__VP_HASH_MAP__ = JSON.parse("{\"config_event.md\":\"cbedfdd0\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"guide_contact.md\":\"10c84e73\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_index.md\":\"59f780b1\",\"config_index.md\":\"5eca9ef5\",\"guide_js-preview.md\":\"d8c75dcf\",\"guide_faq.md\":\"fc7d1e4f\"}")
 __VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vue-office\",\"description\":\"更简单的office文件预览\",\"base\":\"/vue-office/examples/docs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"指南\",\"link\":\"/guide/\"},{\"text\":\"配置参考\",\"link\":\"/config/\"},{\"text\":\"演示预览效果\",\"link\":\"https://501351981.github.io/vue-office/examples/dist/\"}],\"outlineTitle\":\"跳转到\",\"docFooter\":{\"next\":\"下一页\",\"prev\":\"上一页\"},\"sidebar\":{\"/guide\":[{\"text\":\"指南\",\"items\":[{\"text\":\"快速上手\",\"link\":\"/guide/\"},{\"text\":\"docx文件预览\",\"link\":\"/guide/preview-docx\"},{\"text\":\"xlsx文件预览\",\"link\":\"/guide/preview-xlsx\"},{\"text\":\"pdf文件预览\",\"link\":\"/guide/preview-pdf\"},{\"text\":\"非Vue框架进行文件预览\",\"link\":\"/guide/js-preview\"},{\"text\":\"常见问题\",\"link\":\"/guide/faq\"},{\"text\":\"联系我\",\"link\":\"/guide/contact\"}]}],\"/config\":[{\"text\":\"配置参考\",\"items\":[{\"text\":\"属性\",\"link\":\"/config/\"},{\"text\":\"事件\",\"link\":\"/config/event\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/501351981/vue-office\"}]},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
    
  </body>
--- a/examples/docs/hashmap.json
+++ b/examples/docs/hashmap.json
@ -1 +1 @@
-{"guide_preview-docx.md":"747caaea","guide_preview-xlsx.md":"0de0ac4e","guide_js-preview.md":"d8c75dcf","guide_contact.md":"10c84e73","config_event.md":"cbedfdd0","guide_preview-pdf.md":"9bd426ea","config_index.md":"4b837d8d","index.md":"2dfe7e9d","guide_index.md":"59f780b1","guide_faq.md":"fc7d1e4f"}
+{"config_event.md":"cbedfdd0","guide_preview-xlsx.md":"0de0ac4e","guide_preview-docx.md":"747caaea","index.md":"2dfe7e9d","guide_contact.md":"10c84e73","guide_preview-pdf.md":"9bd426ea","guide_index.md":"59f780b1","config_index.md":"5eca9ef5","guide_js-preview.md":"d8c75dcf","guide_faq.md":"fc7d1e4f"}
--- a/examples/docs/index.html
+++ b/examples/docs/index.html
Author	SHA1	Message	Date
liyulin	3ded205006	fix: pdf预览懒加载可配置	2023-09-03 11:00:34 +08:00
liyulin	a525ad1fe1	fix: pdf重复渲染bug	2023-09-02 17:28:43 +08:00
liyulin	cd2c014cfe	doc:更新文档	2023-09-01 16:20:11 +08:00
				`@ -0,0 +1 @@`
				import{d as r}from"./docx-aeed7a99.js";import{d as x}from"./url-de9b02cf.js";import{d as m,_ as l,r as u,o as h,w as v,a as _,c as g,b as D,e as y,f as w,g as B,u as O}from"./index-f39b684b.js";import{P as R,u as f}from"./PreviewWrapper-959ef7d0.js";import"./_commonjs-dynamic-modules-302442b1.js";const $=m({name:"VueOfficeDocx",props:{src:[String,ArrayBuffer,Blob],requestOptions:{type:Object,default:()=>({})},options:{type:Object,default:()=>({})}},emits:["rendered","error"],setup(e,{emit:o}){const t=u(null);let n=null;function a(){let c=t.value;r.getData(e.src,e.requestOptions).then(async d=>{n=await r.getBlob(d),r.render(n,c,e.options).then(()=>{o("rendered")}).catch(p=>{r.render("",c,e.options),o("error",p)})}).catch(d=>{r.render("",c,e.options),o("error",d)})}h(()=>{e.src&&a()}),v(()=>e.src,()=>{e.src?a():r.render("",t.value,e.options).then(()=>{o("rendered")})});function s(c){x(c\|\|`vue-office-docx-${new Date().getTime()}.docx`,n)}return{rootRef:t,save:s}}}),b={class:"vue-office-docx"},k={class:"vue-office-docx-main",ref:"rootRef"};function V(e,o,t,n,a,s){return _(),g("div",b,[D("div",k,null,512)])}const i=l($,[["render",V]]);i.install=function(e){e.component(i.name,i)};const E={__name:"DocxDemo",setup(e){function o(){f.hideLoading()}function t(s){console.log("出差",s),f.hideLoading()}const n=location.origin+(location.pathname+"/").replace("//","/")+"static/test-files/test.docx",a=u();return(s,c)=>(_(),y(R,{accept:".docx",placeholder:"请输入docx文件地址","default-src":n},{default:w(d=>[B(O(i),{ref_key:"docxRef",ref:a,src:d.src,style:{flex:"1",height:"0"},onRendered:o,onError:t},null,8,["src"])]),_:1}))}},P=l(E,[["__scopeId","data-v-637d9a60"]]);export{P as default};
				`@ -0,0 +1 @@`
				import{l as R,r as B,S as T,a as m,g as D,b as $,t as L,c as k}from"./hack-b5a6ddac.js";import{d as q}from"./url-de9b02cf.js";import{d as F,_ as V,r as p,o as W,n as j,h as I,w as M,a as y,c as N,b as P,i as A,e as H,f as U,j as z,g as G,u as J}from"./index-f39b684b.js";import{P as K,u as O}from"./PreviewWrapper-959ef7d0.js";import"./_commonjs-dynamic-modules-302442b1.js";const E={minColLength:20},Q=F({name:"VueOfficeExcel",props:{src:[String,ArrayBuffer,Blob],requestOptions:{type:Object,default:()=>({})},options:{type:Object,default:()=>({...E})}},emits:["rendered","error"],setup(t,{emit:f}){console.log(t.options.transformData);const c=p(null),s=p(null);let n={_worksheets:[]},r=[],o=0,d=null,e=null,l=null,w=null;function _(i){w=i,$(i).then(u=>{if(!u._worksheets\|\|u._worksheets.length===0)throw new Error("未获取到数据，可能文件格式不正确或文件已损坏");let{workbookData:h,medias:g,workbookSource:a}=L(u,{...E,...t.options});t.options.transformData&&typeof t.options.transformData=="function"&&(h=t.options.transformData(h)),r=g,n=a,l=null,o=0,k(),e.loadData(h),m(d,r,n._worksheets[o],l),f("rendered")}).catch(u=>{console.warn(u),r=[],n={_worksheets:[]},k(),e&&e.loadData({}),f("error",u)})}const v=R.debounce(B,200).bind(this,s.value),b=new MutationObserver(v),S={attributes:!0,childList:!0,subtree:!0};W(()=>{j(()=>{b.observe(s.value,S),v(s),e=new T(s.value,{mode:"read",showToolbar:!1,showContextmenu:t.options.showContextmenu\|\|!1,view:{height:()=>c.value&&c.value.clientHeight\|\|300,width:()=>c.value&&c.value.clientWidth\|\|1200},row:{height:24,len:100},col:{len:26,width:80,indexWidth:60,minWidth:60},autoFocus:!1}).loadData({});let i=e.bottombar.swapFunc;e.bottombar.swapFunc=function(a){i.call(e.bottombar,a),o=a,setTimeout(()=>{e.reRender(),m(d,r,n._worksheets[o],l)})};let u=e.sheet.editor.clear;e.sheet.editor.clear=function(...a){u.apply(e.sheet.editor,a),setTimeout(()=>{m(d,r,n._worksheets[o],l)})};let h=e.sheet.editor.setOffset;e.sheet.editor.setOffset=function(...a){h.apply(e.sheet.editor,a),l=a[0],m(d,r,n._worksheets[o],l)},d=s.value.querySelector("canvas").getContext("2d"),t.src&&D(t.src,t.requestOptions).then(_).catch(a=>{e.loadData({}),f("error",a)})})}),I(()=>{b.disconnect(),e=null}),M(()=>t.src,()=>{t.src?D(t.src,t.requestOptions).then(_).catch(i=>{e.loadData({}),f("error",i)}):e.loadData({})});function C(i){q(i\|\|`vue-office-excel-${new Date().getTime()}.xlsx`,w)}return{wrapperRef:c,rootRef:s,save:C}}}),X={class:"vue-office-excel",ref:"wrapperRef"},Y={class:"vue-office-excel-main",ref:"rootRef"};function Z(t,f,c,s,n,r){return y(),N("div",X,[P("div",Y,null,512)],512)}const x=V(Q,[["render",Z]]);x.install=function(t){t.component(x.name,x)};const ne={__name:"ExcelDemo",setup(t){function f(){O.hideLoading()}function c(o){console.log("出差",o),O.hideLoading()}function s(o){return console.log("transformData",o),o}const n=location.origin+(location.pathname+"/").replace("//","/")+"static/test-files/test.xlsx",r=p();return(o,d)=>{const e=A("loading");return y(),H(K,{accept:".xlsx",placeholder:"请输入xlsx文件地址","default-src":n},{default:U(l=>[z(G(J(x),{ref_key:"docxRef",ref:r,src:l.src,options:{transformData:s},style:{flex:"1",height:"0"},onRendered:f,onError:c},null,8,["src","options"]),[[e,!0]])]),_:1})}}};export{ne as default};
				`@ -0,0 +1 @@`
				var p=Object.defineProperty;var c=(i,e,t)=>e in i?p(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t;var r=(i,e,t)=>(c(i,typeof e!="symbol"?e+"":e,t),t);import{d as n}from"./docx-aeed7a99.js";import{d as l}from"./url-de9b02cf.js";import{r as h,o as d,a as u,c as m}from"./index-f39b684b.js";import"./_commonjs-dynamic-modules-302442b1.js";class w{constructor(e,t={},s={}){r(this,"container",null);r(this,"wrapper",null);r(this,"wrapperMain",null);r(this,"options",{});r(this,"requestOptions",{});r(this,"fileData",null);this.container=e,this.options=t,this.requestOptions=s,this.createWrapper()}createWrapper(){this.wrapper=document.createElement("div"),this.wrapper.className="vue-office-docx",this.wrapperMain=document.createElement("div"),this.wrapperMain.className="vue-office-docx-main",this.wrapper.appendChild(this.wrapperMain),this.container.appendChild(this.wrapper)}setOptions(e){this.options=e}setRequestOptions(e){this.requestOptions=e}preview(e){return new Promise((t,s)=>{n.getData(e,this.requestOptions).then(async o=>{this.fileData=await n.getBlob(o),n.render(this.fileData,this.wrapperMain,this.options).then(()=>{t()}).catch(a=>{n.render("",this.wrapperMain,this.options),s(a)})}).catch(o=>{n.render("",this.wrapperMain,this.options),s(o)})})}save(e){l(e\|\|`js-preview-docx-${new Date().getTime()}.docx`,this.fileData)}destroy(){this.container.removeChild(this.wrapper),this.container=null,this.wrapper=null,this.wrapperMain=null,this.options=null,this.requestOptions=null}}function f(i,e,t){return new w(i,e,t)}const v={init:f};const q={__name:"JsDocxDemo",setup(i){const e=h(null);return d(()=>{let t=v.init(e.value);t.preview("/vue-office/examples/dist/static/test-files/test.docx").then(s=>{console.log("docx preview done"),setTimeout(()=>{t.preview("/vue-office/examples/dist/static/test-files/test2.docx")},3e3)}).catch(s=>{console.log("err",s)})}),(t,s)=>(u(),m("div",{ref_key:"dom",ref:e},null,512))}};export{q as default};
				`@ -0,0 +1 @@`
				var c=Object.defineProperty;var p=(r,e,t)=>e in r?c(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t;var s=(r,e,t)=>(p(r,typeof e!="symbol"?e+"":e,t),t);import{S as u,a as n,b as d,t as w,c as l,l as x,r as m,g as f}from"./hack-b5a6ddac.js";import{d as k}from"./url-de9b02cf.js";/* empty css */import{r as v,o as b,a as S,c as D}from"./index-f39b684b.js";import"./_commonjs-dynamic-modules-302442b1.js";const _={minColLength:20};class E{constructor(e,t={},i={}){s(this,"container",null);s(this,"wrapper",null);s(this,"wrapperMain",null);s(this,"options",{});s(this,"requestOptions",{});s(this,"mediasSource",[]);s(this,"workbookDataSource",{_worksheets:[]});s(this,"sheetIndex",1);s(this,"ctx",null);s(this,"xs",null);s(this,"offset",null);s(this,"observer",null);s(this,"fileData",null);this.container=e,this.options={..._,...t},this.requestOptions=i,this.createWrapper(),this.initSpreadsheet(),this.hack()}createWrapper(){this.wrapper=document.createElement("div"),this.wrapper.className="vue-office-excel",this.wrapperMain=document.createElement("div"),this.wrapperMain.className="vue-office-excel-main",this.wrapper.appendChild(this.wrapperMain),this.container.appendChild(this.wrapper)}initSpreadsheet(){this.xs=new u(this.wrapperMain,{mode:"read",showToolbar:!1,showContextmenu:this.options.showContextmenu\|\|!1,view:{height:()=>this.wrapper&&this.wrapper.clientHeight\|\|300,width:()=>this.wrapper&&this.wrapper.clientWidth\|\|1200},row:{height:24,len:100},col:{len:26,width:80,indexWidth:60,minWidth:60},autoFocus:!1}).loadData({});let e=this,t=this.xs.bottombar.swapFunc;this.xs.bottombar.swapFunc=function(a){t.call(e.xs.bottombar,a),e.sheetIndex=a+1,setTimeout(()=>{e.xs.reRender(),n(e.ctx,e.mediasSource,e.workbookDataSource._worksheets[e.sheetIndex],e.offset)})};let i=this.xs.sheet.editor.clear;this.xs.sheet.editor.clear=function(...a){i.apply(e.xs.sheet.editor,a),setTimeout(()=>{n(e.ctx,e.mediasSource,e.workbookDataSource._worksheets[e.sheetIndex],e.offset)})};let o=this.xs.sheet.editor.setOffset;this.xs.sheet.editor.setOffset=function(...a){o.apply(e.xs.sheet.editor,a),e.offset=a[0],n(e.ctx,e.mediasSource,e.workbookDataSource._worksheets[e.sheetIndex],e.offset)};const h=this.wrapperMain.querySelector("canvas");this.ctx=h.getContext("2d")}renderExcel(e){return this.fileData=e,d(e).then(t=>{if(!t._worksheets\|\|t._worksheets.length===0)throw new Error("未获取到数据，可能文件格式不正确或文件已损坏");const{workbookData:i,medias:o,workbookSource:h}=w(t,this.options);this.mediasSource=o,this.workbookDataSource=h,this.offset=null,this.sheetIndex=1,l(),this.xs.loadData(i),n(this.ctx,this.mediasSource,this.workbookDataSource._worksheets[this.sheetIndex],this.offset)}).catch(t=>(this.mediasSource=[],this.workbookDataSource={_worksheets:[]},l(),this.xs.loadData({}),Promise.reject(t)))}hack(){const e=x.debounce(m,200).bind(this,this.wrapperMain);this.observer=new MutationObserver(e);const t={attributes:!0,childList:!0,subtree:!0};this.observer.observe(this.wrapperMain,t),e(this.wrapperMain)}setOptions(e){this.options=e}setRequestOptions(e){this.requestOptions=e}preview(e){return new Promise((t,i)=>{f(e,this.requestOptions).then(o=>{this.renderExcel(o).then(t)}).catch(o=>{this.xs.loadData({}),i(o)})})}save(e){k(e\|\|`js-preview-excel-${new Date().getTime()}.xlsx`,this.fileData)}destroy(){this.observer.disconnect(),this.container.removeChild(this.wrapper),this.container=null,this.wrapper=null,this.wrapperMain=null,this.ctx=null,this.xs=null,this.observer=null,this.options=null,this.requestOptions=null,this.mediasSource=null,this.workbookDataSource=null}}function g(r,e,t){return new E(r,e,t)}const O={init:g},T={__name:"JsExcelDemo",setup(r){const e=v(null);return b(()=>{window.myExcelPreview=O.init(e.value,{}),window.myExcelPreview.preview("/vue-office/examples/dist/static/test-files/test.xlsx").then(t=>{console.log("excel preview done",window.myExcelPreview)}).catch(t=>{console.log("err",t)})}),(t,i)=>(S(),D("div",{ref_key:"dom",ref:e,style:{height:"calc(100vh - 50px)"}},null,512))}};export{T as default};
				`@ -0,0 +1 @@`
				import{r as d,p as C,_ as I,w as N,q as l,a as p,c as x,u as t,g as i,f as n,s as v,t as S,e as y,m,l as V,v as W,x as A,b as R}from"./index-f39b684b.js";function T(e){const s=d("url"),a=d(e),r=d(e),u=d([]);function b(w){let c=new FileReader;return c.onload=o=>{let _=o.target.result;r.value=_},c.readAsArrayBuffer(w),!1}return{type:s,inputSrc:a,src:r,fileList:u,beforeUpload:b}}let g=d(!1),k;function $(e){k=C.loading(e,0),g.value=!0}function q(){g.value===!0&&(k(),g.value=!1)}const E={loading:g,showLoading:$,hideLoading:q};function F(){return location.href.includes("test")}const j=e=>(W("data-v-6e0b6946"),e=e(),A(),e),z={class:"preview-wrapper"},D={key:0,class:"operate-area"},G=j(()=>R("div",{class:"preview-wrapper-main"},null,-1)),H={__name:"PreviewWrapper",props:{accept:String,placeholder:String,defaultSrc:String},setup(e){const s=e,{type:a,inputSrc:r,src:u,fileList:b,beforeUpload:w}=T(s.defaultSrc);return N(u,()=>{E.showLoading()},{immediate:!0}),(c,o)=>{const _=l("a-radio-button"),B=l("a-radio-group"),L=l("a-input"),h=l("a-button"),U=l("upload-outlined"),P=l("a-upload");return p(),x("div",z,[t(F)()?m("",!0):(p(),x("div",D,[i(B,{value:t(a),"onUpdate:value":o[0]\|\|(o[0]=f=>S(a)?a.value=f:null),"button-style":"solid"},{default:n(()=>[i(_,{value:"url"},{default:n(()=>[v("远程文件地址")]),_:1}),i(_,{value:"upload"},{default:n(()=>[v("上传本地文件")]),_:1})]),_:1},8,["value"]),t(a)==="url"?(p(),y(L,{key:0,value:t(r),"onUpdate:value":o[1]\|\|(o[1]=f=>S(r)?r.value=f:null),placeholder:s.placeholder,style:{width:"600px","margin-left":"10px"}},null,8,["value","placeholder"])):m("",!0),t(a)==="url"?(p(),y(h,{key:1,type:"primary",style:{"margin-left":"10px"},onClick:o[2]\|\|(o[2]=f=>u.value=t(r))},{default:n(()=>[v(" 预览 ")]),_:1})):m("",!0),t(a)!=="url"?(p(),y(P,{key:2,accept:s.accept,action:"",beforeUpload:t(w),"file-list":[]},{default:n(()=>[i(h,{style:{"margin-left":"10px"}},{default:n(()=>[i(U),v(" 选择文件 ")]),_:1})]),_:1},8,["accept","beforeUpload"])):m("",!0)])),V(c.$slots,"default",{src:t(u)},void 0,!0),G])}}},K=I(H,[["__scopeId","data-v-6e0b6946"]]);export{K as P,E as u};