升级vue-demi、修复pdf内存溢出

core/package.json

@@ -14,7 +14,10 @@
     "lib:vue-pdf": "node script/bak-vue.js bak && lerna run build --scope @vue-office/pdf"
   },
   "dependencies": {
+    "@babel/plugin-transform-runtime": "^7.23.6",
+    "@babel/plugin-transform-template-literals": "^7.23.3",
     "@babel/preset-env": "^7.22.5",
+    "@babel/runtime": "^7.23.6",
     "@rollup/plugin-babel": "^6.0.3",
     "@vue/compiler-sfc": "3.2.45",
     "ant-design-vue": "^3.2.17",
@@ -27,7 +30,7 @@
     "rollup": "^3.26.0",
     "rollup-plugin-postcss": "^4.0.2",
     "tinycolor2": "^1.6.0",
-    "vue-demi": "^0.13.11",
+    "vue-demi": "^0.14.6",
     "x-data-spreadsheet": "^1.1.9"
   },
   "devDependencies": {

core/packages/js-docx/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@js-preview/docx",
   "type" :"module",
-  "version": "1.3.2",
+  "version": "1.6.0",
   "description": "",
   "main": "lib/index.js",
   "files": [

core/packages/js-excel/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@js-preview/excel",
   "type" :"module",
-  "version": "1.4.7",
+  "version": "1.6.0",
   "description": "",
   "main": "lib/index.js",
   "files": [

core/packages/js-pdf/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@js-preview/pdf",
   "type" :"module",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "description": "",
   "main": "lib/index.js",
   "files": [

core/packages/js-pdf/src/main.js

@@ -140,6 +140,7 @@ class JsPdfPreview{
             }
             this.checkPdfLib().then(_=>{
                 this.getDocument(src).then(pdf=>{
+                    this.pdfDocument && this.pdfDocument.destroy();
                     this.pdfDocument = pdf;
                     this.renderPage().then(_=>{
                         resolve();
@@ -177,6 +178,7 @@ class JsPdfPreview{
         this.wrapperMain = null;
         this.options = {};
         this.requestOptions = {};
+        this.pdfDocument && this.pdfDocument.destroy();
         this.pdfDocument = null;
     }
 }

core/packages/vue-docx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-office/docx",
-  "version": "1.3.2",
+  "version": "1.6.0",
   "description": "",
   "main": "lib/index.js",
   "files": [
@@ -21,7 +21,7 @@
   "peerDependencies": {
     "@vue/composition-api": "^1.7.1",
     "vue": "^2.0.0 || >=3.0.0",
-    "vue-demi": "^0.13.11"
+    "vue-demi": "^0.14.6"
   },
   "peerDependenciesMeta": {
     "@vue/composition-api": {

core/packages/vue-docx/src/main.vue

@@ -1,7 +1,7 @@
 <script>
 import {defineComponent, ref, onMounted, watch} from 'vue-demi';
 import docx from './docx';
-import {download as downloadFile} from "../../../utils/url";
+import {download as downloadFile} from '../../../utils/url';
 
 export default defineComponent({
     name: 'VueOfficeDocx',

core/packages/vue-excel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-office/excel",
-  "version": "1.4.7",
+  "version": "1.6.0",
   "description": "",
   "main": "lib/index.js",
   "files": [
@@ -21,7 +21,7 @@
   "peerDependencies": {
     "@vue/composition-api": "^1.7.1",
     "vue": "^2.0.0 || >=3.0.0",
-    "vue-demi": "^0.13.11"
+    "vue-demi": "^0.14.6"
   },
   "peerDependenciesMeta": {
     "@vue/composition-api": {

core/packages/vue-pdf/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-office/pdf",
-  "version": "1.5.5",
+  "version": "1.6.0",
   "description": "",
   "main": "lib/index.js",
   "files": [
@@ -21,7 +21,7 @@
   "peerDependencies": {
     "@vue/composition-api": "^1.7.1",
     "vue": "^2.0.0 || >=3.0.0",
-    "vue-demi": "^0.13.11"
+    "vue-demi": "^0.14.6"
   },
   "peerDependenciesMeta": {
     "@vue/composition-api": {

core/packages/vue-pdf/src/main.vue

@@ -1,5 +1,5 @@
 <script>
-import { defineComponent, ref, onMounted, watch } from 'vue-demi';
+import { defineComponent, ref, onMounted, watch, onBeforeUnmount } from 'vue-demi';
 import workerStr from './worker?raw';
 import pdfjsLib from './pdf?raw';
 import { download as downloadFile, getUrl, loadScript } from '../../../utils/url';
@@ -36,6 +36,14 @@ export default defineComponent({
 
         const lazySize = 5;
 
+        onBeforeUnmount(()=>{
+            if(pdfDocument === null){
+                return;
+            }
+            pdfDocument.destroy();
+            pdfDocument = null;
+            loadingTask = null;
+        });
         function installPdfScript() {
             return loadScript(pdfJsLibSrc).then(() => {
                 if (window.pdfjsLib) {
@@ -66,6 +74,7 @@ export default defineComponent({
                 ...omit(props.options, ['width'])
             });
             loadingTask.promise.then((pdf) => {
+                pdfDocument && pdfDocument.destroy();
                 pdfDocument = pdf;
                 numPages.value = props.options.lazy ? Math.min(pdfDocument.numPages, lazySize) : pdfDocument.numPages;
                 setTimeout(()=>{

examples/dist/assets/DocxDemo-25a1500a.js

@@ -0,0 +1 @@
+import{d as r}from"./docx-78e97cc7.js";import{d as p}from"./url-de9b02cf.js";import{d as x,_ as l,r as u,o as h,w as v,a as _,c as g,b as w,e as y,f as D,g as B,u as O}from"./index-af9355c6.js";import{P as R,u as f}from"./PreviewWrapper-cdc4cf89.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 t=u(null);let n=null;function a(){let c=t.value;r.getData(e.src,e.requestOptions).then(async d=>{n=await r.getBlob(d),r.render(n,c,e.options).then(()=>{o("rendered")}).catch(m=>{r.render("",c,e.options),o("error",m)})}).catch(d=>{r.render("",c,e.options),o("error",d)})}h(()=>{e.src&&a()}),v(()=>e.src,()=>{e.src?a():r.render("",t.value,e.options).then(()=>{o("rendered")})});function s(c){p(c||`vue-office-docx-${new Date().getTime()}.docx`,n)}return{rootRef:t,save:s}}}),b={class:"vue-office-docx"},k={class:"vue-office-docx-main",ref:"rootRef"};function V(e,o,t,n,a,s){return _(),g("div",b,[w("div",k,null,512)])}const i=l($,[["render",V]]);i.install=function(e){e.component(i.name,i)};const E={__name:"DocxDemo",setup(e){function o(){f.hideLoading()}function t(s){console.log("出差",s),f.hideLoading()}const n=location.origin+(location.pathname+"/").replace("//","/")+"static/test-files/test.docx",a=u();return(s,c)=>(_(),y(R,{accept:".docx",placeholder:"请输入docx文件地址","default-src":n},{default:D(d=>[B(O(i),{ref_key:"docxRef",ref:a,src:d.src,style:{flex:"1",height:"0"},onRendered:o,onError:t},null,8,["src"])]),_:1}))}},N=l(E,[["__scopeId","data-v-637d9a60"]]);export{N as default};

examples/dist/assets/ExcelDemo-1eabae3f.js

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

examples/dist/assets/JsDocxDemo-56a28d39.js

@@ -0,0 +1 @@
+var p=Object.defineProperty;var c=(i,e,t)=>e in i?p(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t;var n=(i,e,t)=>(c(i,typeof e!="symbol"?e+"":e,t),t);import{d as r}from"./docx-78e97cc7.js";import{d as l}from"./url-de9b02cf.js";import{r as h,o as d,a as u,c as m}from"./index-af9355c6.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};

examples/dist/assets/JsExcelDemo-1af0520e.js

@@ -0,0 +1 @@
+var c=Object.defineProperty;var p=(r,e,t)=>e in r?c(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t;var s=(r,e,t)=>(p(r,typeof e!="symbol"?e+"":e,t),t);import{S as u,a as h,b as d,t as w,c as l,l as x,r as m,g as f}from"./hack-9dbfd773.js";import{d as k}from"./url-de9b02cf.js";/* empty css              */import{r as v,o as b,a as S,c as D}from"./index-af9355c6.js";import"./_commonjs-dynamic-modules-302442b1.js";const _={minColLength:20};class E{constructor(e,t={},i={}){s(this,"container",null);s(this,"wrapper",null);s(this,"wrapperMain",null);s(this,"options",{});s(this,"requestOptions",{});s(this,"mediasSource",[]);s(this,"workbookDataSource",{_worksheets:[]});s(this,"sheetIndex",1);s(this,"ctx",null);s(this,"xs",null);s(this,"offset",null);s(this,"observer",null);s(this,"fileData",null);this.container=e,this.options={..._,...t},this.requestOptions=i,this.createWrapper(),this.initSpreadsheet(),this.hack()}createWrapper(){this.wrapper=document.createElement("div"),this.wrapper.className="vue-office-excel",this.wrapperMain=document.createElement("div"),this.wrapperMain.className="vue-office-excel-main",this.wrapper.appendChild(this.wrapperMain),this.container.appendChild(this.wrapper)}initSpreadsheet(){this.xs=new u(this.wrapperMain,{mode:"read",showToolbar:!1,showContextmenu:this.options.showContextmenu||!1,view:{height:()=>this.wrapper&&this.wrapper.clientHeight||300,width:()=>this.wrapper&&this.wrapper.clientWidth||1200},row:{height:24,len:100},col:{len:26,width:80,indexWidth:60,minWidth:60},autoFocus:!1}).loadData({});let e=this,t=this.xs.bottombar.swapFunc;this.xs.bottombar.swapFunc=function(a){t.call(e.xs.bottombar,a),e.sheetIndex=a,setTimeout(()=>{e.xs.reRender(),h(e.ctx,e.mediasSource,e.workbookDataSource._worksheets[e.sheetIndex],e.offset)})};let i=this.xs.sheet.editor.clear;this.xs.sheet.editor.clear=function(...a){i.apply(e.xs.sheet.editor,a),setTimeout(()=>{h(e.ctx,e.mediasSource,e.workbookDataSource._worksheets[e.sheetIndex],e.offset)})};let o=this.xs.sheet.editor.setOffset;this.xs.sheet.editor.setOffset=function(...a){o.apply(e.xs.sheet.editor,a),e.offset=a[0],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).then(t=>{if(!t._worksheets||t._worksheets.length===0)throw new Error("未获取到数据，可能文件格式不正确或文件已损坏");const{workbookData:i,medias:o,workbookSource:n}=w(t,this.options);this.mediasSource=o,this.workbookDataSource=n,this.offset=null,this.sheetIndex=0,l(),this.xs.loadData(i),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=x.debounce(m,200).bind(this,this.wrapperMain);this.observer=new MutationObserver(e);const t={attributes:!0,childList:!0,subtree:!0};this.observer.observe(this.wrapperMain,t),e(this.wrapperMain)}setOptions(e){this.options=e}setRequestOptions(e){this.requestOptions=e}preview(e){return new Promise((t,i)=>{f(e,this.requestOptions).then(o=>{this.renderExcel(o).then(t).catch(n=>{this.xs.loadData({}),i(n)})}).catch(o=>{this.xs.loadData({}),i(o)})})}save(e){k(e||`js-preview-excel-${new Date().getTime()}.xlsx`,this.fileData)}destroy(){this.observer.disconnect(),this.container.removeChild(this.wrapper),this.container=null,this.wrapper=null,this.wrapperMain=null,this.ctx=null,this.xs=null,this.observer=null,this.options=null,this.requestOptions=null,this.mediasSource=null,this.workbookDataSource=null}}function g(r,e,t){return new E(r,e,t)}const O={init:g},T={__name:"JsExcelDemo",setup(r){const e=v(null);return b(()=>{window.myExcelPreview=O.init(e.value,{}),window.myExcelPreview.preview("/vue-office/examples/dist/static/test-files/test.xlsx").then(t=>{console.log("excel preview done",window.myExcelPreview)}).catch(t=>{console.log("err",t)})}),(t,i)=>(S(),D("div",{ref_key:"dom",ref:e,style:{height:"calc(100vh - 50px)"}},null,512))}};export{T as default};

examples/dist/assets/PreviewWrapper-cdc4cf89.js

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

examples/dist/index.html

@@ -7,7 +7,7 @@
           content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
     />
     <title>@vue-office演示demo</title>
-    <script type="module" crossorigin src="/vue-office/examples/dist/assets/index-846e3dd9.js"></script>
+    <script type="module" crossorigin src="/vue-office/examples/dist/assets/index-af9355c6.js"></script>
     <link rel="stylesheet" href="/vue-office/examples/dist/assets/index-37fb8ca9.css">
   </head>
   <body>