yaclty/vue-office
1
0
Fork 0
mirror of https://github.com/501351981/vue-office.git synced 2025-06-15 07:00:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

add: pdf 改为虚拟列表渲染

Browse Source
This commit is contained in:
liyulin 2024-04-17 20:38:25 +08:00
parent d7c8ea95fa
commit ad0214f893
45 changed files with 927 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo-cdn/js-preview-lib/pdf.umd.js
View File

File diff suppressed because one or more lines are too long

15
demo-cdn/pdf.html
View File

@ -9,12 +9,15 @@
<div id="pdf"></div>
<script>
const myPdfPreviewer = jsPreviewPdf.init(document.getElementById('pdf'));
myPdfPreviewer.preview('http://static.shanhuxueyuan.com/test.pdf').then(()=>{
console.log('预览完成');
}).catch(e=>{
console.log('预览失败', e);
})
const myPdfPreviewer = jsPreviewPdf.init(document.getElementById('pdf'), {
onError: (e)=>{
console.log('发生错误', e)
},
onRendered: ()=>{
console.log('渲染完成')
}
});
myPdfPreviewer.preview('http://static.shanhuxueyuan.com/test.pdf')
</script>
</body>
</html>

4
demo-vue2/package.json
View File

@ -10,10 +10,10 @@
"dependencies": {
"@js-preview/docx": "^1.6.0",
"@js-preview/excel": "^1.7.3",
"@js-preview/pdf": "^1.6.5",
"@js-preview/pdf": "^2.0.0",
"@vue-office/docx": "^1.6.0",
"@vue-office/excel": "^1.7.3",
"@vue-office/pdf": "^1.6.5",
"@vue-office/pdf": "^2.0.0",
"core-js": "^3.8.3",
"element-ui": "^2.15.14",
"vue": "^2.7.16",

15
demo-vue2/src/components/JsPreviewPdf.vue
View File

@ -12,12 +12,15 @@ export default {
}
},
mounted() {
this.myPdfPreviewer = jsPreviewPdf.init(document.getElementById('pdf'));
this.myPdfPreviewer.preview('http://static.shanhuxueyuan.com/test.pdf').then(()=>{
console.log('预览完成');
}).catch(e=>{
console.log('预览失败', e);
})
this.myPdfPreviewer = jsPreviewPdf.init(document.getElementById('pdf'), {
onError: (e)=>{
console.log('发生错误', e)
},
onRendered: ()=>{
console.log('渲染完成')
}
});
this.myPdfPreviewer.preview('http://static.shanhuxueyuan.com/test.pdf');
},
beforeDestroy() {
this.myPdfPreviewer.destroy();

4
demo-vue3/package.json
View File

@ -10,10 +10,10 @@
"dependencies": {
"@js-preview/docx": "^1.6.0",
"@js-preview/excel": "^1.7.3",
"@js-preview/pdf": "^1.6.5",
"@js-preview/pdf": "^2.0.0",
"@vue-office/docx": "^1.6.0",
"@vue-office/excel": "^1.7.3",
"@vue-office/pdf": "^1.6.5",
"@vue-office/pdf": "^2.0.0",
"core-js": "^3.8.3",
"element-plus": "^2.6.2",
"vue": "^3.2.13",

15
demo-vue3/src/components/JsPreviewPdf.vue
View File

@ -12,12 +12,15 @@ export default {
}
},
mounted() {
this.myPdfPreviewer = jsPreviewPdf.init(document.getElementById('pdf'));
this.myPdfPreviewer.preview('http://static.shanhuxueyuan.com/test.pdf').then(()=>{
console.log('预览完成');
}).catch(e=>{
console.log('预览失败', e);
})
this.myPdfPreviewer = jsPreviewPdf.init(document.getElementById('pdf'), {
onError: (e)=>{
console.log('发生错误', e)
},
onRendered: ()=>{
console.log('渲染完成')
}
});
this.myPdfPreviewer.preview('http://static.shanhuxueyuan.com/test.pdf');
},
beforeUnmount() {
this.myPdfPreviewer.destroy();

1
examples/dist/assets/DocxDemo-26dc1577.js vendored Normal file
View File

@ -0,0 +1 @@
import{d as r}from"./docx-0f3742b9.js";import{d as p}from"./url-de9b02cf.js";import{d as x,_ as l,r as _,o as h,w as v,a as m,c as g,b as D,e as w,f as y,g as O,u as B}from"./index-964e16aa.js";import{P as R,u}from"./PreviewWrapper-71e8c83a.js";import"./_commonjs-dynamic-modules-302442b1.js";typeof window.setImmediate>"u"&&(window.setImmediate=function(e,...o){setTimeout(()=>e(o))});const $=x({name:"VueOfficeDocx",props:{src:[String,ArrayBuffer,Blob],requestOptions:{type:Object,default:()=>({})},options:{type:Object,default:()=>({})}},emits:["rendered","error"],setup(e,{emit:o}){const n=_(null);let c=null;function a(){let t=n.value;r.getData(e.src,e.requestOptions).then(async i=>{c=await r.getBlob(i),r.render(c,t,e.options).then(()=>{o("rendered")}).catch(f=>{r.render("",t,e.options),o("error",f)})}).catch(i=>{r.render("",t,e.options),o("error",i)})}h(()=>{e.src&&a()}),v(()=>e.src,()=>{e.src?a():r.render("",n.value,e.options).then(()=>{o("rendered")})});function s(t){p(t||`vue-office-docx-${new Date().getTime()}.docx`,c)}return{rootRef:n,save:s}}}),b={class:"vue-office-docx"},V={class:"vue-office-docx-main",ref:"rootRef"};function k(e,o,n,c,a,s){return m(),g("div",b,[D("div",V,null,512)])}const d=l($,[["render",k]]);d.install=function(e){e.component(d.name,d)};const q={__name:"DocxDemo",setup(e){function o(){u.hideLoading()}function n(t){console.log("出差",t),u.hideLoading()}const c=location.origin+(location.pathname+"/").replace("//","/")+"static/test-files/test.docx",a=_(),s={headers:{"component-name":"VueOfficeDocx"}};return(t,i)=>(m(),w(R,{accept:".docx",placeholder:"请输入docx文件地址","default-src":c},{default:y(f=>[O(B(d),{ref_key:"docxRef",ref:a,src:f.src,"request-options":s,style:{flex:"1",height:"0"},onRendered:o,onError:n},null,8,["src"])]),_:1}))}},N=l(q,[["__scopeId","data-v-844ea5ef"]]);export{N as default};

1
examples/dist/assets/DocxDemo-7f3f2298.js vendored Normal file
View File

@ -0,0 +1 @@
import{d as r}from"./docx-3e54e032.js";import{d as p}from"./url-de9b02cf.js";import{d as x,_ as l,r as _,o as h,w as v,a as m,c as g,b as D,e as w,f as y,g as O,u as B}from"./index-0390a516.js";import{P as R,u}from"./PreviewWrapper-bde2073d.js";import"./_commonjs-dynamic-modules-302442b1.js";typeof window.setImmediate>"u"&&(window.setImmediate=function(e,...o){setTimeout(()=>e(o))});const $=x({name:"VueOfficeDocx",props:{src:[String,ArrayBuffer,Blob],requestOptions:{type:Object,default:()=>({})},options:{type:Object,default:()=>({})}},emits:["rendered","error"],setup(e,{emit:o}){const n=_(null);let c=null;function a(){let t=n.value;r.getData(e.src,e.requestOptions).then(async i=>{c=await r.getBlob(i),r.render(c,t,e.options).then(()=>{o("rendered")}).catch(f=>{r.render("",t,e.options),o("error",f)})}).catch(i=>{r.render("",t,e.options),o("error",i)})}h(()=>{e.src&&a()}),v(()=>e.src,()=>{e.src?a():r.render("",n.value,e.options).then(()=>{o("rendered")})});function s(t){p(t||`vue-office-docx-${new Date().getTime()}.docx`,c)}return{rootRef:n,save:s}}}),b={class:"vue-office-docx"},V={class:"vue-office-docx-main",ref:"rootRef"};function k(e,o,n,c,a,s){return m(),g("div",b,[D("div",V,null,512)])}const d=l($,[["render",k]]);d.install=function(e){e.component(d.name,d)};const q={__name:"DocxDemo",setup(e){function o(){u.hideLoading()}function n(t){console.log("出差",t),u.hideLoading()}const c=location.origin+(location.pathname+"/").replace("//","/")+"static/test-files/test.docx",a=_(),s={headers:{"component-name":"VueOfficeDocx"}};return(t,i)=>(m(),w(R,{accept:".docx",placeholder:"请输入docx文件地址","default-src":c},{default:y(f=>[O(B(d),{ref_key:"docxRef",ref:a,src:f.src,"request-options":s,style:{flex:"1",height:"0"},onRendered:o,onError:n},null,8,["src"])]),_:1}))}},N=l(q,[["__scopeId","data-v-844ea5ef"]]);export{N as default};

1
examples/dist/assets/ExcelDemo-2536b368.js vendored Normal file
View File

@ -0,0 +1 @@
import{l as C,r as R,S as B,a as x,g as p,b as $,t as L,c as S}from"./hack-c6bf21f6.js";import{d as q}from"./url-de9b02cf.js";import{d as F,_ as V,r as b,o as W,n as j,h as I,w as M,a as O,c as N,b as A,i as H,e as P,f as U,j as z,g as G,u as J}from"./index-964e16aa.js";import{P as K,u as y}from"./PreviewWrapper-71e8c83a.js";import"./_commonjs-dynamic-modules-302442b1.js";const E={xls:!1,minColLength:20},Q=F({name:"VueOfficeExcel",props:{src:[String,ArrayBuffer,Blob],requestOptions:{type:Object,default:()=>({})},options:{type:Object,default:()=>({...E})}},emits:["rendered","error","switchSheet"],setup(t,{emit:n}){const u=b(null),f=b(null);let a={_worksheets:[]},o=[],d=0,_=null,e=null,s=null,l=null;function c(h){l=h,$(h,t.options.xls).then(i=>{if(!i._worksheets||i._worksheets.length===0)throw new Error("未获取到数据，可能文件格式不正确或文件已损坏");t.options.beforeTransformData&&typeof t.options.beforeTransformData=="function"&&(i=t.options.beforeTransformData(i));let{workbookData:m,medias:g,workbookSource:r}=L(i,{...E,...t.options});t.options.transformData&&typeof t.options.transformData=="function"&&(m=t.options.transformData(m)),o=g,a=r,s=null,d=0,S(),e.loadData(m),x(_,o,a._worksheets[d],s,t.options),n("rendered"),n("switchSheet",0)}).catch(i=>{console.warn(i),o=[],a={_worksheets:[]},S(),e&&e.loadData({}),n("error",i),n("switchSheet",0)})}const w=C.debounce(R,200).bind(this,f.value),D=new MutationObserver(w),k={attributes:!0,childList:!0,subtree:!0};W(()=>{j(()=>{D.observe(f.value,k),w(f),e=new B(f.value,{mode:"read",showToolbar:!1,showContextmenu:t.options.showContextmenu||!1,view:{height:()=>u.value&&u.value.clientHeight||300,width:()=>u.value&&u.value.clientWidth||1200},row:{height:24,len:100},col:{len:26,width:80,indexWidth:60,minWidth:60},autoFocus:!1}).loadData({});let h=e.bottombar.swapFunc;e.bottombar.swapFunc=function(r){h.call(e.bottombar,r),d=r,setTimeout(()=>{e.reRender(),x(_,o,a._worksheets[d],s,t.options),n("switchSheet",r)})};let i=e.sheet.editor.clear;e.sheet.editor.clear=function(...r){i.apply(e.sheet.editor,r),setTimeout(()=>{x(_,o,a._worksheets[d],s,t.options)})};let m=e.sheet.editor.setOffset;e.sheet.editor.setOffset=function(...r){m.apply(e.sheet.editor,r),s=r[0],x(_,o,a._worksheets[d],s,t.options)},_=f.value.querySelector("canvas").getContext("2d"),t.src&&p(t.src,t.requestOptions).then(c).catch(r=>{o=[],a={_worksheets:[]},e.loadData({}),n("error",r)})})}),I(()=>{D.disconnect(),e=null}),M(()=>t.src,()=>{t.src?p(t.src,t.requestOptions).then(c).catch(h=>{o=[],a={_worksheets:[]},e.loadData({}),n("error",h)}):(o=[],a={_worksheets:[]},e.loadData({}),n("error",new Error("src属性不能为空")))});function T(h){q(h||`vue-office-excel-${new Date().getTime()}.xlsx`,l)}return{wrapperRef:u,rootRef:f,save:T}}}),X={class:"vue-office-excel",ref:"wrapperRef"},Y={class:"vue-office-excel-main",ref:"rootRef"};function Z(t,n,u,f,a,o){return O(),N("div",X,[A("div",Y,null,512)],512)}const v=V(Q,[["render",Z]]);v.install=function(t){t.component(v.name,v)};const re={__name:"ExcelDemo",setup(t){function n(){y.hideLoading()}function u(e){console.log("出差",e),y.hideLoading()}function f(e){return console.log("transformData",e),e}const a=location.origin+(location.pathname+"/").replace("//","/")+"static/test-files/test.xlsx",o=b();function d(e){return console.log("beforeTransformData",e,o),e._worksheets.forEach(s=>{let l=0;if(s._rows[l]&&s._rows[l]._cells)for(let c=0;c<s._rows[l]._cells.length;c++){let w=s._rows[l]._cells[c];w?w.style={bgcolor:"#00ff00"}:s._rows[l]._cells[c]={text:"",value:"",style:{bgcolor:"#00ff00"}}}}),e}function _(e){console.log("当前sheet",e)}return(e,s)=>{const l=H("loading");return O(),P(K,{accept:".xlsx,.xls",placeholder:"请输入xlsx文件地址","default-src":a},{default:U(c=>[z(G(J(v),{ref_key:"docxRef",ref:o,src:c.src,options:{beforeTransformData:d,transformData:f,xls:c.xls},style:{flex:"1",height:"0"},onRendered:n,onError:u,onSwitchSheet:_},null,8,["src","options"]),[[l,!0]])]),_:1})}}};export{re as default};

1
examples/dist/assets/ExcelDemo-ae394629.js vendored Normal file
View File

@ -0,0 +1 @@
import{l as C,r as R,S as B,a as x,g as p,b as $,t as L,c as S}from"./hack-2bb75e3f.js";import{d as q}from"./url-de9b02cf.js";import{d as F,_ as V,r as b,o as W,n as j,h as I,w as M,a as O,c as N,b as A,i as H,e as P,f as U,j as z,g as G,u as J}from"./index-0390a516.js";import{P as K,u as y}from"./PreviewWrapper-bde2073d.js";import"./_commonjs-dynamic-modules-302442b1.js";const E={xls:!1,minColLength:20},Q=F({name:"VueOfficeExcel",props:{src:[String,ArrayBuffer,Blob],requestOptions:{type:Object,default:()=>({})},options:{type:Object,default:()=>({...E})}},emits:["rendered","error","switchSheet"],setup(t,{emit:n}){const u=b(null),f=b(null);let a={_worksheets:[]},o=[],d=0,_=null,e=null,s=null,l=null;function c(h){l=h,$(h,t.options.xls).then(i=>{if(!i._worksheets||i._worksheets.length===0)throw new Error("未获取到数据，可能文件格式不正确或文件已损坏");t.options.beforeTransformData&&typeof t.options.beforeTransformData=="function"&&(i=t.options.beforeTransformData(i));let{workbookData:m,medias:g,workbookSource:r}=L(i,{...E,...t.options});t.options.transformData&&typeof t.options.transformData=="function"&&(m=t.options.transformData(m)),o=g,a=r,s=null,d=0,S(),e.loadData(m),x(_,o,a._worksheets[d],s,t.options),n("rendered"),n("switchSheet",0)}).catch(i=>{console.warn(i),o=[],a={_worksheets:[]},S(),e&&e.loadData({}),n("error",i),n("switchSheet",0)})}const w=C.debounce(R,200).bind(this,f.value),D=new MutationObserver(w),k={attributes:!0,childList:!0,subtree:!0};W(()=>{j(()=>{D.observe(f.value,k),w(f),e=new B(f.value,{mode:"read",showToolbar:!1,showContextmenu:t.options.showContextmenu||!1,view:{height:()=>u.value&&u.value.clientHeight||300,width:()=>u.value&&u.value.clientWidth||1200},row:{height:24,len:100},col:{len:26,width:80,indexWidth:60,minWidth:60},autoFocus:!1}).loadData({});let h=e.bottombar.swapFunc;e.bottombar.swapFunc=function(r){h.call(e.bottombar,r),d=r,setTimeout(()=>{e.reRender(),x(_,o,a._worksheets[d],s,t.options),n("switchSheet",r)})};let i=e.sheet.editor.clear;e.sheet.editor.clear=function(...r){i.apply(e.sheet.editor,r),setTimeout(()=>{x(_,o,a._worksheets[d],s,t.options)})};let m=e.sheet.editor.setOffset;e.sheet.editor.setOffset=function(...r){m.apply(e.sheet.editor,r),s=r[0],x(_,o,a._worksheets[d],s,t.options)},_=f.value.querySelector("canvas").getContext("2d"),t.src&&p(t.src,t.requestOptions).then(c).catch(r=>{o=[],a={_worksheets:[]},e.loadData({}),n("error",r)})})}),I(()=>{D.disconnect(),e=null}),M(()=>t.src,()=>{t.src?p(t.src,t.requestOptions).then(c).catch(h=>{o=[],a={_worksheets:[]},e.loadData({}),n("error",h)}):(o=[],a={_worksheets:[]},e.loadData({}),n("error",new Error("src属性不能为空")))});function T(h){q(h||`vue-office-excel-${new Date().getTime()}.xlsx`,l)}return{wrapperRef:u,rootRef:f,save:T}}}),X={class:"vue-office-excel",ref:"wrapperRef"},Y={class:"vue-office-excel-main",ref:"rootRef"};function Z(t,n,u,f,a,o){return O(),N("div",X,[A("div",Y,null,512)],512)}const v=V(Q,[["render",Z]]);v.install=function(t){t.component(v.name,v)};const re={__name:"ExcelDemo",setup(t){function n(){y.hideLoading()}function u(e){console.log("出差",e),y.hideLoading()}function f(e){return console.log("transformData",e),e}const a=location.origin+(location.pathname+"/").replace("//","/")+"static/test-files/test.xlsx",o=b();function d(e){return console.log("beforeTransformData",e,o),e._worksheets.forEach(s=>{let l=0;if(s._rows[l]&&s._rows[l]._cells)for(let c=0;c<s._rows[l]._cells.length;c++){let w=s._rows[l]._cells[c];w?w.style={bgcolor:"#00ff00"}:s._rows[l]._cells[c]={text:"",value:"",style:{bgcolor:"#00ff00"}}}}),e}function _(e){console.log("当前sheet",e)}return(e,s)=>{const l=H("loading");return O(),P(K,{accept:".xlsx,.xls",placeholder:"请输入xlsx文件地址","default-src":a},{default:U(c=>[z(G(J(v),{ref_key:"docxRef",ref:o,src:c.src,options:{beforeTransformData:d,transformData:f,xls:c.xls},style:{flex:"1",height:"0"},onRendered:n,onError:u,onSwitchSheet:_},null,8,["src","options"]),[[l,!0]])]),_:1})}}};export{re as default};

1
examples/dist/assets/JsDocxDemo-04e125de.js vendored Normal file
View File

@ -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 n=(i,e,t)=>(c(i,typeof e!="symbol"?e+"":e,t),t);import{d as r}from"./docx-0f3742b9.js";import{d as l}from"./url-de9b02cf.js";import{r as h,o as d,a as u,c as m}from"./index-964e16aa.js";import"./_commonjs-dynamic-modules-302442b1.js";typeof window.setImmediate>"u"&&(window.setImmediate=function(i,...e){setTimeout(()=>i(e))});class w{constructor(e,t={},s={}){n(this,"container",null);n(this,"wrapper",null);n(this,"wrapperMain",null);n(this,"options",{});n(this,"requestOptions",{});n(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)=>{r.getData(e,this.requestOptions).then(async o=>{this.fileData=await r.getBlob(o),r.render(this.fileData,this.wrapperMain,this.options).then(()=>{t()}).catch(a=>{r.render("",this.wrapperMain,this.options),s(a)})}).catch(o=>{r.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};

1
examples/dist/assets/JsDocxDemo-7c61a796.js vendored Normal file
View File

@ -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 n=(i,e,t)=>(c(i,typeof e!="symbol"?e+"":e,t),t);import{d as r}from"./docx-3e54e032.js";import{d as l}from"./url-de9b02cf.js";import{r as h,o as d,a as u,c as m}from"./index-0390a516.js";import"./_commonjs-dynamic-modules-302442b1.js";typeof window.setImmediate>"u"&&(window.setImmediate=function(i,...e){setTimeout(()=>i(e))});class w{constructor(e,t={},s={}){n(this,"container",null);n(this,"wrapper",null);n(this,"wrapperMain",null);n(this,"options",{});n(this,"requestOptions",{});n(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)=>{r.getData(e,this.requestOptions).then(async o=>{this.fileData=await r.getBlob(o),r.render(this.fileData,this.wrapperMain,this.options).then(()=>{t()}).catch(a=>{r.render("",this.wrapperMain,this.options),s(a)})}).catch(o=>{r.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};

1
examples/dist/assets/JsExcelDemo-a54328d5.js vendored Normal file
View File

@ -0,0 +1 @@
var c=Object.defineProperty;var p=(o,e,t)=>e in o?c(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var s=(o,e,t)=>(p(o,typeof e!="symbol"?e+"":e,t),t);import{S as u,a as h,b as d,t as w,c as l,l as f,r as m,g as x}from"./hack-c6bf21f6.js";import{d as b}from"./url-de9b02cf.js";/* empty css */import{r as D,o as k,a as v,c as S}from"./index-964e16aa.js";import"./_commonjs-dynamic-modules-302442b1.js";const _={xls:!1,minColLength:20};class E{constructor(e,t={},r={}){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=r,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,setTimeout(()=>{e.xs.reRender(),h(e.ctx,e.mediasSource,e.workbookDataSource._worksheets[e.sheetIndex],e.offset)})};let r=this.xs.sheet.editor.clear;this.xs.sheet.editor.clear=function(...a){r.apply(e.xs.sheet.editor,a),setTimeout(()=>{h(e.ctx,e.mediasSource,e.workbookDataSource._worksheets[e.sheetIndex],e.offset)})};let i=this.xs.sheet.editor.setOffset;this.xs.sheet.editor.setOffset=function(...a){i.apply(e.xs.sheet.editor,a),e.offset=a[0],h(e.ctx,e.mediasSource,e.workbookDataSource._worksheets[e.sheetIndex],e.offset)};const n=this.wrapperMain.querySelector("canvas");this.ctx=n.getContext("2d")}renderExcel(e){return this.fileData=e,d(e,this.options.xls).then(t=>{if(!t._worksheets||t._worksheets.length===0)throw new Error("未获取到数据，可能文件格式不正确或文件已损坏");this.options.beforeTransformData&&typeof this.options.beforeTransformData=="function"&&(t=this.options.beforeTransformData(t));let{workbookData:r,medias:i,workbookSource:n}=w(t,this.options);this.options.transformData&&typeof this.options.transformData=="function"&&(r=this.options.transformData(r)),this.mediasSource=i,this.workbookDataSource=n,this.offset=null,this.sheetIndex=0,l(),this.xs.loadData(r),h(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=f.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,r)=>{x(e,this.requestOptions).then(i=>{this.renderExcel(i).then(t).catch(n=>{this.mediasSource=[],this.workbookDataSource={_worksheets:[]},this.xs.loadData({}),r(n)})}).catch(i=>{this.mediasSource=[],this.workbookDataSource={_worksheets:[]},this.xs.loadData({}),r(i)})})}save(e){b(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(o,e,t){return new E(o,e,t)}const O={init:g},P={__name:"JsExcelDemo",setup(o){const e=D(null);return k(()=>{window.myExcelPreview=O.init(e.value,{transformData:function(t){return console.log("transformData",t),t}}),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,r)=>(v(),S("div",{ref_key:"dom",ref:e,style:{height:"calc(100vh - 50px)"}},null,512))}};export{P as default};

1
examples/dist/assets/JsExcelDemo-e2961fef.js vendored Normal file
View File

@ -0,0 +1 @@
var c=Object.defineProperty;var p=(o,e,t)=>e in o?c(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var s=(o,e,t)=>(p(o,typeof e!="symbol"?e+"":e,t),t);import{S as u,a as h,b as d,t as w,c as l,l as f,r as m,g as x}from"./hack-2bb75e3f.js";import{d as b}from"./url-de9b02cf.js";/* empty css */import{r as D,o as k,a as v,c as S}from"./index-0390a516.js";import"./_commonjs-dynamic-modules-302442b1.js";const _={xls:!1,minColLength:20};class E{constructor(e,t={},r={}){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=r,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,setTimeout(()=>{e.xs.reRender(),h(e.ctx,e.mediasSource,e.workbookDataSource._worksheets[e.sheetIndex],e.offset)})};let r=this.xs.sheet.editor.clear;this.xs.sheet.editor.clear=function(...a){r.apply(e.xs.sheet.editor,a),setTimeout(()=>{h(e.ctx,e.mediasSource,e.workbookDataSource._worksheets[e.sheetIndex],e.offset)})};let i=this.xs.sheet.editor.setOffset;this.xs.sheet.editor.setOffset=function(...a){i.apply(e.xs.sheet.editor,a),e.offset=a[0],h(e.ctx,e.mediasSource,e.workbookDataSource._worksheets[e.sheetIndex],e.offset)};const n=this.wrapperMain.querySelector("canvas");this.ctx=n.getContext("2d")}renderExcel(e){return this.fileData=e,d(e,this.options.xls).then(t=>{if(!t._worksheets||t._worksheets.length===0)throw new Error("未获取到数据，可能文件格式不正确或文件已损坏");this.options.beforeTransformData&&typeof this.options.beforeTransformData=="function"&&(t=this.options.beforeTransformData(t));let{workbookData:r,medias:i,workbookSource:n}=w(t,this.options);this.options.transformData&&typeof this.options.transformData=="function"&&(r=this.options.transformData(r)),this.mediasSource=i,this.workbookDataSource=n,this.offset=null,this.sheetIndex=0,l(),this.xs.loadData(r),h(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=f.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,r)=>{x(e,this.requestOptions).then(i=>{this.renderExcel(i).then(t).catch(n=>{this.mediasSource=[],this.workbookDataSource={_worksheets:[]},this.xs.loadData({}),r(n)})}).catch(i=>{this.mediasSource=[],this.workbookDataSource={_worksheets:[]},this.xs.loadData({}),r(i)})})}save(e){b(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(o,e,t){return new E(o,e,t)}const O={init:g},P={__name:"JsExcelDemo",setup(o){const e=D(null);return k(()=>{window.myExcelPreview=O.init(e.value,{transformData:function(t){return console.log("transformData",t),t}}),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,r)=>(v(),S("div",{ref_key:"dom",ref:e,style:{height:"calc(100vh - 50px)"}},null,512))}};export{P as default};

1
examples/dist/assets/JsPdfDemo-fb2c5c6c.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/dist/assets/JsPdfDemo-fd1b3cc6.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

3
examples/dist/assets/PdfDemo-264438b0.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

3
examples/dist/assets/PdfDemo-c17d7112.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/dist/assets/PreviewWrapper-71e8c83a.js vendored Normal file
View File

@ -0,0 +1 @@
import{r as u,m as C,_ as I,w as N,l as n,a as d,c as k,u as t,g as i,f as r,p as g,q as S,e as h,s as y,k as V,t as A,v as R,b as T}from"./index-964e16aa.js";function $(e){const p=u("url"),a=u(e),o=u(e),l=u(typeof e=="string"?e.endsWith(".xls"):!1),c=u([]);function x(_){l.value=_.name.endsWith("xls");let f=new FileReader;return f.onload=s=>{let v=s.target.result;o.value=v},f.readAsArrayBuffer(_),!1}return{type:p,inputSrc:a,src:o,xls:l,fileList:c,beforeUpload:x}}let w=u(!1),B;function q(e){B=C.loading(e,0),w.value=!0}function E(){w.value===!0&&(B(),w.value=!1)}const F={loading:w,showLoading:q,hideLoading:E};function j(){return location.href.includes("test")}const z=e=>(A("data-v-0bd825a5"),e=e(),R(),e),D={class:"preview-wrapper"},G={key:0,class:"operate-area"},H=z(()=>T("div",{class:"preview-wrapper-main"},null,-1)),J={__name:"PreviewWrapper",props:{accept:String,placeholder:String,defaultSrc:String},setup(e){const p=e,{type:a,inputSrc:o,src:l,xls:c,fileList:x,beforeUpload:_}=$(p.defaultSrc);return N(l,()=>{F.showLoading()},{immediate:!0}),(f,s)=>{const v=n("a-radio-button"),L=n("a-radio-group"),U=n("a-input"),b=n("a-button"),W=n("upload-outlined"),P=n("a-upload");return d(),k("div",D,[t(j)()?y("",!0):(d(),k("div",G,[i(L,{value:t(a),"onUpdate:value":s[0]||(s[0]=m=>S(a)?a.value=m:null),"button-style":"solid"},{default:r(()=>[i(v,{value:"url"},{default:r(()=>[g("远程文件地址")]),_:1}),i(v,{value:"upload"},{default:r(()=>[g("上传本地文件")]),_:1})]),_:1},8,["value"]),t(a)==="url"?(d(),h(U,{key:0,value:t(o),"onUpdate:value":s[1]||(s[1]=m=>S(o)?o.value=m:null),placeholder:p.placeholder,style:{width:"600px","margin-left":"10px"}},null,8,["value","placeholder"])):y("",!0),t(a)==="url"?(d(),h(b,{key:1,type:"primary",style:{"margin-left":"10px"},onClick:s[2]||(s[2]=m=>{l.value=t(o),c.value=t(o).endsWith("xls")})},{default:r(()=>[g(" 预览 ")]),_:1})):y("",!0),t(a)!=="url"?(d(),h(P,{key:2,accept:p.accept,action:"",beforeUpload:t(_),"file-list":[]},{default:r(()=>[i(b,{style:{"margin-left":"10px"}},{default:r(()=>[i(W),g(" 选择文件 ")]),_:1})]),_:1},8,["accept","beforeUpload"])):y("",!0)])),V(f.$slots,"default",{src:t(l),xls:t(c)},void 0,!0),H])}}},M=I(J,[["__scopeId","data-v-0bd825a5"]]);export{M as P,F as u};

1
examples/dist/assets/PreviewWrapper-bde2073d.js vendored Normal file
View File

@ -0,0 +1 @@
import{r as u,m as C,_ as I,w as N,l as n,a as d,c as k,u as t,g as i,f as r,p as g,q as S,e as h,s as y,k as V,t as A,v as R,b as T}from"./index-0390a516.js";function $(e){const p=u("url"),a=u(e),o=u(e),l=u(typeof e=="string"?e.endsWith(".xls"):!1),c=u([]);function x(_){l.value=_.name.endsWith("xls");let f=new FileReader;return f.onload=s=>{let v=s.target.result;o.value=v},f.readAsArrayBuffer(_),!1}return{type:p,inputSrc:a,src:o,xls:l,fileList:c,beforeUpload:x}}let w=u(!1),B;function q(e){B=C.loading(e,0),w.value=!0}function E(){w.value===!0&&(B(),w.value=!1)}const F={loading:w,showLoading:q,hideLoading:E};function j(){return location.href.includes("test")}const z=e=>(A("data-v-0bd825a5"),e=e(),R(),e),D={class:"preview-wrapper"},G={key:0,class:"operate-area"},H=z(()=>T("div",{class:"preview-wrapper-main"},null,-1)),J={__name:"PreviewWrapper",props:{accept:String,placeholder:String,defaultSrc:String},setup(e){const p=e,{type:a,inputSrc:o,src:l,xls:c,fileList:x,beforeUpload:_}=$(p.defaultSrc);return N(l,()=>{F.showLoading()},{immediate:!0}),(f,s)=>{const v=n("a-radio-button"),L=n("a-radio-group"),U=n("a-input"),b=n("a-button"),W=n("upload-outlined"),P=n("a-upload");return d(),k("div",D,[t(j)()?y("",!0):(d(),k("div",G,[i(L,{value:t(a),"onUpdate:value":s[0]||(s[0]=m=>S(a)?a.value=m:null),"button-style":"solid"},{default:r(()=>[i(v,{value:"url"},{default:r(()=>[g("远程文件地址")]),_:1}),i(v,{value:"upload"},{default:r(()=>[g("上传本地文件")]),_:1})]),_:1},8,["value"]),t(a)==="url"?(d(),h(U,{key:0,value:t(o),"onUpdate:value":s[1]||(s[1]=m=>S(o)?o.value=m:null),placeholder:p.placeholder,style:{width:"600px","margin-left":"10px"}},null,8,["value","placeholder"])):y("",!0),t(a)==="url"?(d(),h(b,{key:1,type:"primary",style:{"margin-left":"10px"},onClick:s[2]||(s[2]=m=>{l.value=t(o),c.value=t(o).endsWith("xls")})},{default:r(()=>[g(" 预览 ")]),_:1})):y("",!0),t(a)!=="url"?(d(),h(P,{key:2,accept:p.accept,action:"",beforeUpload:t(_),"file-list":[]},{default:r(()=>[i(b,{style:{"margin-left":"10px"}},{default:r(()=>[i(W),g(" 选择文件 ")]),_:1})]),_:1},8,["accept","beforeUpload"])):y("",!0)])),V(f.$slots,"default",{src:t(l),xls:t(c)},void 0,!0),H])}}},M=I(J,[["__scopeId","data-v-0bd825a5"]]);export{M as P,F as u};

97
examples/dist/assets/docx-0f3742b9.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

97
examples/dist/assets/docx-3e54e032.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

3
examples/dist/assets/function-2ca28ed0.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

3
examples/dist/assets/function-d9e17b0d.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

199
examples/dist/assets/hack-2bb75e3f.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

199
examples/dist/assets/hack-c6bf21f6.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

121
examples/dist/assets/index-0390a516.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

121
examples/dist/assets/index-964e16aa.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
examples/dist/index.html vendored
View File

@ -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-c1a0d432.js"></script>
<script type="module" crossorigin src="/vue-office/examples/dist/assets/index-0390a516.js"></script>
<link rel="stylesheet" href="/vue-office/examples/dist/assets/index-37fb8ca9.css">
</head>
<body>

2
examples/docs/404.html
View File

File diff suppressed because one or more lines are too long

16
examples/docs/assets/guide_js-preview.md.d8c75dcf.js → examples/docs/assets/guide_js-preview.md.f1b307fb.js
View File

@ -22,12 +22,15 @@ import{_ as s,c as a,o as n,O as l}from"./chunks/framework.935eb42c.js";const A=
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span></code></pre></div><h2 id="pdf文件预览" tabindex="-1">pdf文件预览 <a class="header-anchor" href="#pdf文件预览" aria-label="Permalink to &quot;pdf文件预览&quot;">​</a></h2><ul><li>安装依赖库</li></ul><div class="language-shell"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># docx文件预览库</span></span>
<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">@js-preview/pdf</span></span></code></pre></div><ul><li>预览</li></ul><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;font-style:italic;">import</span><span style="color:#A6ACCD;"> jsPreviewPdf </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">@js-preview/pdf</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> myPdfPreviewer </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> jsPreviewPdf</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">init</span><span style="color:#A6ACCD;">(document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pdf</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">myPdfPreviewer</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">preview</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">res</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">预览完成</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">catch</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">预览失败</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">e</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span></code></pre></div><h2 id="api" tabindex="-1">API <a class="header-anchor" href="#api" aria-label="Permalink to &quot;API&quot;">​</a></h2><h3 id="init方法" tabindex="-1">init方法 <a class="header-anchor" href="#init方法" aria-label="Permalink to &quot;init方法&quot;">​</a></h3><p>三种库的init方法保持一致，init方法会返回预览对象。</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;">init</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">HTMLElement</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">options</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Options</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">requestOptions</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">any</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> JsPdfPreview </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> JsExcelPreview </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;">JsDocxPreview</span><span style="color:#89DDFF;">;</span></span></code></pre></div><ul><li>container</li></ul><p>预览挂载的父容器Dom</p><ul><li>options</li></ul><p>预览支持的配置参数，三个预览库支持的配置不同。</p><p>docx预览支持的配置，详细说明见库docx-preview：</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:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">interface</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Options</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> myPdfPreviewer </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> jsPreviewPdf</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">init</span><span style="color:#A6ACCD;">(document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pdf</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">onError</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#89DDFF;">)</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">发生错误</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">e</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:#A6ACCD;"> </span><span style="color:#82AAFF;">onRendered</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">渲染完成</span><span style="color:#89DDFF;">&#39;</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 style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">myPdfPreviewer</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">preview</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h2 id="api" tabindex="-1">API <a class="header-anchor" href="#api" aria-label="Permalink to &quot;API&quot;">​</a></h2><h3 id="init方法" tabindex="-1">init方法 <a class="header-anchor" href="#init方法" aria-label="Permalink to &quot;init方法&quot;">​</a></h3><p>三种库的init方法保持一致，init方法会返回预览对象。</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;">init</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">HTMLElement</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">options</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Options</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">requestOptions</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">any</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> JsPdfPreview </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> JsExcelPreview </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;">JsDocxPreview</span><span style="color:#89DDFF;">;</span></span></code></pre></div><ul><li>container</li></ul><p>预览挂载的父容器Dom</p><ul><li>options</li></ul><p>预览支持的配置参数，三个预览库支持的配置不同。</p><p>docx预览支持的配置，详细说明见库docx-preview：</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:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">interface</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Options</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">inWrapper</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:#A6ACCD;"> </span><span style="color:#F07178;">ignoreWidth</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:#A6ACCD;"> </span><span style="color:#F07178;">ignoreHeight</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">;</span></span>
@ -50,6 +53,7 @@ import{_ as s,c as a,o as n,O as l}from"./chunks/framework.935eb42c.js";const A=
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">showContextmenu</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//是否显示右键菜单，默认false</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><p>pdf支持的配置，详情见<a href="https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html" target="_blank" rel="noreferrer">https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html</a></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:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">interface</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Options</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">staticFileUrl</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">gap</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//多个canvas之间的距离</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">width</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">data</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">BinaryData</span><span style="color:#89DDFF;">;</span></span>
<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:#FFCB6B;">Object</span><span style="color:#89DDFF;">;</span></span>

0
examples/docs/assets/guide_js-preview.md.d8c75dcf.lean.js → examples/docs/assets/guide_js-preview.md.f1b307fb.lean.js
View File

1
examples/docs/assets/guide_preview-pdf.md.9bd426ea.js → examples/docs/assets/guide_preview-pdf.md.56fbeb2e.js
View File

@ -1,6 +1,7 @@
import{_ as s,c as n,o as a,O as l}from"./chunks/framework.935eb42c.js";const C=JSON.parse('{"title":"pdf文件预览","description":"","frontmatter":{},"headers":[],"relativePath":"guide/preview-pdf.md"}'),p={name:"guide/preview-pdf.md"},o=l(`<h1 id="pdf文件预览" tabindex="-1">pdf文件预览 <a class="header-anchor" href="#pdf文件预览" aria-label="Permalink to &quot;pdf文件预览&quot;">​</a></h1><h2 id="使用网络地址预览" tabindex="-1">使用网络地址预览 <a class="header-anchor" href="#使用网络地址预览" aria-label="Permalink to &quot;使用网络地址预览&quot;">​</a></h2><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">vue-office-pdf</span><span style="color:#89DDFF;"> </span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">pdf</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">height: 100vh</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">@rendered</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">renderedHandler</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">@error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">errorHandler</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;"> /&gt;</span></span>

0
examples/docs/assets/guide_preview-pdf.md.9bd426ea.lean.js → examples/docs/assets/guide_preview-pdf.md.56fbeb2e.lean.js
View File

2
examples/docs/config/event.html
View File

File diff suppressed because one or more lines are too long

2
examples/docs/config/index.html
View File

@ -47,7 +47,7 @@
<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></div></div></main><footer class="VPDocFooter" data-v-aa7e4f8a data-v-6701008d><!--[--><!--]--><!----><div class="prev-next" data-v-6701008d><div class="pager" data-v-6701008d><!----></div><div class="pager" data-v-6701008d><a class="pager-link next" href="/vue-office/examples/docs/config/event.html" data-v-6701008d><span class="desc" data-v-6701008d>下一页</span><span class="title" data-v-6701008d>事件</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_event.md\":\"cbedfdd0\",\"config_index.md\":\"95a7c30b\",\"guide_contact.md\":\"10c84e73\",\"guide_index.md\":\"59f780b1\",\"guide_js-preview.md\":\"d8c75dcf\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_faq.md\":\"fc7d1e4f\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"guide_preview-xlsx.md\":\"12045179\"}")
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_event.md\":\"cbedfdd0\",\"guide_contact.md\":\"10c84e73\",\"config_index.md\":\"95a7c30b\",\"guide_js-preview.md\":\"f1b307fb\",\"guide_index.md\":\"59f780b1\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"guide_preview-xlsx.md\":\"12045179\",\"guide_faq.md\":\"fc7d1e4f\",\"guide_preview-pdf.md\":\"56fbeb2e\"}")
__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>

2
examples/docs/guide/contact.html
View File

File diff suppressed because one or more lines are too long

2
examples/docs/guide/faq.html
View File

@ -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-aa7e4f8a data-v-6701008d><!--[--><!--]--><!----><div class="prev-next" data-v-6701008d><div class="pager" data-v-6701008d><a class="pager-link prev" href="/vue-office/examples/docs/guide/js-preview.html" data-v-6701008d><span class="desc" data-v-6701008d>上一页</span><span class="title" data-v-6701008d>非Vue框架进行文件预览</span></a></div><div class="has-prev pager" data-v-6701008d><a class="pager-link next" href="/vue-office/examples/docs/guide/contact.html" data-v-6701008d><span class="desc" data-v-6701008d>下一页</span><span class="title" data-v-6701008d>联系我</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_event.md\":\"cbedfdd0\",\"config_index.md\":\"95a7c30b\",\"guide_contact.md\":\"10c84e73\",\"guide_index.md\":\"59f780b1\",\"guide_js-preview.md\":\"d8c75dcf\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_faq.md\":\"fc7d1e4f\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"guide_preview-xlsx.md\":\"12045179\"}")
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_event.md\":\"cbedfdd0\",\"guide_contact.md\":\"10c84e73\",\"config_index.md\":\"95a7c30b\",\"guide_js-preview.md\":\"f1b307fb\",\"guide_index.md\":\"59f780b1\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"guide_preview-xlsx.md\":\"12045179\",\"guide_faq.md\":\"fc7d1e4f\",\"guide_preview-pdf.md\":\"56fbeb2e\"}")
__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>

2
examples/docs/guide/index.html
View File

@ -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-aa7e4f8a data-v-6701008d><!--[--><!--]--><!----><div class="prev-next" data-v-6701008d><div class="pager" data-v-6701008d><!----></div><div class="pager" data-v-6701008d><a class="pager-link next" href="/vue-office/examples/docs/guide/preview-docx.html" data-v-6701008d><span class="desc" data-v-6701008d>下一页</span><span class="title" data-v-6701008d>docx文件预览</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_event.md\":\"cbedfdd0\",\"config_index.md\":\"95a7c30b\",\"guide_contact.md\":\"10c84e73\",\"guide_index.md\":\"59f780b1\",\"guide_js-preview.md\":\"d8c75dcf\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_faq.md\":\"fc7d1e4f\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"guide_preview-xlsx.md\":\"12045179\"}")
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_event.md\":\"cbedfdd0\",\"guide_contact.md\":\"10c84e73\",\"config_index.md\":\"95a7c30b\",\"guide_js-preview.md\":\"f1b307fb\",\"guide_index.md\":\"59f780b1\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"guide_preview-xlsx.md\":\"12045179\",\"guide_faq.md\":\"fc7d1e4f\",\"guide_preview-pdf.md\":\"56fbeb2e\"}")
__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>

20
examples/docs/guide/js-preview.html
View File

@ -10,7 +10,7 @@
<link rel="preload" href="/vue-office/examples/docs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/vue-office/examples/docs/assets/chunks/framework.935eb42c.js">
<link rel="modulepreload" href="/vue-office/examples/docs/assets/chunks/theme.b572b8e6.js">
<link rel="modulepreload" href="/vue-office/examples/docs/assets/guide_js-preview.md.d8c75dcf.lean.js">
<link rel="modulepreload" href="/vue-office/examples/docs/assets/guide_js-preview.md.f1b307fb.lean.js">
<script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
</head>
<body>
@ -38,12 +38,15 @@
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span></code></pre></div><h2 id="pdf文件预览" tabindex="-1">pdf文件预览 <a class="header-anchor" href="#pdf文件预览" aria-label="Permalink to &quot;pdf文件预览&quot;">​</a></h2><ul><li>安装依赖库</li></ul><div class="language-shell"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># docx文件预览库</span></span>
<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">@js-preview/pdf</span></span></code></pre></div><ul><li>预览</li></ul><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;font-style:italic;">import</span><span style="color:#A6ACCD;"> jsPreviewPdf </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">@js-preview/pdf</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> myPdfPreviewer </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> jsPreviewPdf</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">init</span><span style="color:#A6ACCD;">(document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pdf</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">myPdfPreviewer</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">preview</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">res</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">预览完成</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">catch</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">预览失败</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">e</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span></code></pre></div><h2 id="api" tabindex="-1">API <a class="header-anchor" href="#api" aria-label="Permalink to &quot;API&quot;">​</a></h2><h3 id="init方法" tabindex="-1">init方法 <a class="header-anchor" href="#init方法" aria-label="Permalink to &quot;init方法&quot;">​</a></h3><p>三种库的init方法保持一致，init方法会返回预览对象。</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;">init</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">HTMLElement</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">options</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Options</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">requestOptions</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">any</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> JsPdfPreview </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> JsExcelPreview </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;">JsDocxPreview</span><span style="color:#89DDFF;">;</span></span></code></pre></div><ul><li>container</li></ul><p>预览挂载的父容器Dom</p><ul><li>options</li></ul><p>预览支持的配置参数，三个预览库支持的配置不同。</p><p>docx预览支持的配置，详细说明见库docx-preview：</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:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">interface</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Options</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> myPdfPreviewer </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> jsPreviewPdf</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">init</span><span style="color:#A6ACCD;">(document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pdf</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">onError</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#89DDFF;">)</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">发生错误</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">e</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:#A6ACCD;"> </span><span style="color:#82AAFF;">onRendered</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">渲染完成</span><span style="color:#89DDFF;">&#39;</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 style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">myPdfPreviewer</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">preview</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h2 id="api" tabindex="-1">API <a class="header-anchor" href="#api" aria-label="Permalink to &quot;API&quot;">​</a></h2><h3 id="init方法" tabindex="-1">init方法 <a class="header-anchor" href="#init方法" aria-label="Permalink to &quot;init方法&quot;">​</a></h3><p>三种库的init方法保持一致，init方法会返回预览对象。</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;">init</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">HTMLElement</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">options</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Options</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">requestOptions</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">any</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> JsPdfPreview </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> JsExcelPreview </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;">JsDocxPreview</span><span style="color:#89DDFF;">;</span></span></code></pre></div><ul><li>container</li></ul><p>预览挂载的父容器Dom</p><ul><li>options</li></ul><p>预览支持的配置参数，三个预览库支持的配置不同。</p><p>docx预览支持的配置，详细说明见库docx-preview：</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:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">interface</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Options</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">inWrapper</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:#A6ACCD;"> </span><span style="color:#F07178;">ignoreWidth</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:#A6ACCD;"> </span><span style="color:#F07178;">ignoreHeight</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">;</span></span>
@ -66,6 +69,7 @@
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">showContextmenu</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//是否显示右键菜单，默认false</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><p>pdf支持的配置，详情见<a href="https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html" target="_blank" rel="noreferrer">https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html</a></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:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">interface</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Options</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">staticFileUrl</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">gap</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//多个canvas之间的距离</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">width</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">data</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">BinaryData</span><span style="color:#89DDFF;">;</span></span>
<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:#FFCB6B;">Object</span><span style="color:#89DDFF;">;</span></span>
@ -78,7 +82,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-aa7e4f8a data-v-6701008d><!--[--><!--]--><!----><div class="prev-next" data-v-6701008d><div class="pager" data-v-6701008d><a class="pager-link prev" href="/vue-office/examples/docs/guide/preview-pdf.html" data-v-6701008d><span class="desc" data-v-6701008d>上一页</span><span class="title" data-v-6701008d>pdf文件预览</span></a></div><div class="has-prev pager" data-v-6701008d><a class="pager-link next" href="/vue-office/examples/docs/guide/faq.html" data-v-6701008d><span class="desc" data-v-6701008d>下一页</span><span class="title" data-v-6701008d>常见问题</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_event.md\":\"cbedfdd0\",\"config_index.md\":\"95a7c30b\",\"guide_contact.md\":\"10c84e73\",\"guide_index.md\":\"59f780b1\",\"guide_js-preview.md\":\"d8c75dcf\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_faq.md\":\"fc7d1e4f\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"guide_preview-xlsx.md\":\"12045179\"}")
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_event.md\":\"cbedfdd0\",\"guide_contact.md\":\"10c84e73\",\"config_index.md\":\"95a7c30b\",\"guide_js-preview.md\":\"f1b307fb\",\"guide_index.md\":\"59f780b1\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"guide_preview-xlsx.md\":\"12045179\",\"guide_faq.md\":\"fc7d1e4f\",\"guide_preview-pdf.md\":\"56fbeb2e\"}")
__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>

2
examples/docs/guide/preview-docx.html
View File

@ -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-aa7e4f8a data-v-6701008d><!--[--><!--]--><!----><div class="prev-next" data-v-6701008d><div class="pager" data-v-6701008d><a class="pager-link prev" href="/vue-office/examples/docs/guide/" data-v-6701008d><span class="desc" data-v-6701008d>上一页</span><span class="title" data-v-6701008d>快速上手</span></a></div><div class="has-prev pager" data-v-6701008d><a class="pager-link next" href="/vue-office/examples/docs/guide/preview-xlsx.html" data-v-6701008d><span class="desc" data-v-6701008d>下一页</span><span class="title" data-v-6701008d>xlsx文件预览</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_event.md\":\"cbedfdd0\",\"config_index.md\":\"95a7c30b\",\"guide_contact.md\":\"10c84e73\",\"guide_index.md\":\"59f780b1\",\"guide_js-preview.md\":\"d8c75dcf\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_faq.md\":\"fc7d1e4f\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"guide_preview-xlsx.md\":\"12045179\"}")
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_event.md\":\"cbedfdd0\",\"guide_contact.md\":\"10c84e73\",\"config_index.md\":\"95a7c30b\",\"guide_js-preview.md\":\"f1b307fb\",\"guide_index.md\":\"59f780b1\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"guide_preview-xlsx.md\":\"12045179\",\"guide_faq.md\":\"fc7d1e4f\",\"guide_preview-pdf.md\":\"56fbeb2e\"}")
__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>

5
examples/docs/guide/preview-pdf.html
View File

File diff suppressed because one or more lines are too long

2
examples/docs/guide/preview-xlsx.html
View File

@ -58,7 +58,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-aa7e4f8a data-v-6701008d><!--[--><!--]--><!----><div class="prev-next" data-v-6701008d><div class="pager" data-v-6701008d><a class="pager-link prev" href="/vue-office/examples/docs/guide/preview-docx.html" data-v-6701008d><span class="desc" data-v-6701008d>上一页</span><span class="title" data-v-6701008d>docx文件预览</span></a></div><div class="has-prev pager" data-v-6701008d><a class="pager-link next" href="/vue-office/examples/docs/guide/preview-pdf.html" data-v-6701008d><span class="desc" data-v-6701008d>下一页</span><span class="title" data-v-6701008d>pdf文件预览</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_event.md\":\"cbedfdd0\",\"config_index.md\":\"95a7c30b\",\"guide_contact.md\":\"10c84e73\",\"guide_index.md\":\"59f780b1\",\"guide_js-preview.md\":\"d8c75dcf\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_faq.md\":\"fc7d1e4f\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"guide_preview-xlsx.md\":\"12045179\"}")
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_event.md\":\"cbedfdd0\",\"guide_contact.md\":\"10c84e73\",\"config_index.md\":\"95a7c30b\",\"guide_js-preview.md\":\"f1b307fb\",\"guide_index.md\":\"59f780b1\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"guide_preview-xlsx.md\":\"12045179\",\"guide_faq.md\":\"fc7d1e4f\",\"guide_preview-pdf.md\":\"56fbeb2e\"}")
__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>

2
examples/docs/hashmap.json
View File

@ -1 +1 @@
{"config_event.md":"cbedfdd0","config_index.md":"95a7c30b","guide_contact.md":"10c84e73","guide_index.md":"59f780b1","guide_js-preview.md":"d8c75dcf","guide_preview-pdf.md":"9bd426ea","guide_faq.md":"fc7d1e4f","guide_preview-docx.md":"747caaea","index.md":"2dfe7e9d","guide_preview-xlsx.md":"12045179"}
{"config_event.md":"cbedfdd0","guide_contact.md":"10c84e73","config_index.md":"95a7c30b","guide_js-preview.md":"f1b307fb","guide_index.md":"59f780b1","guide_preview-docx.md":"747caaea","index.md":"2dfe7e9d","guide_preview-xlsx.md":"12045179","guide_faq.md":"fc7d1e4f","guide_preview-pdf.md":"56fbeb2e"}

2
examples/docs/index.html
View File

File diff suppressed because one or more lines are too long