增加渲染完成事件

README.md

@@ -16,7 +16,7 @@ npm install vue-office
 ### docx文档的预览
 ```vue
 <template>
-  <vue-office-docx :src="docx"/>
+  <vue-office-docx :src="docx" @rendered="rendered"/>
 </template>
 
 <script>
@@ -31,6 +31,11 @@ export default {
     return {
       docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档地址
     }
+  },
+  methods:{
+    rendered(){
+      console.log("渲染完成")
+    }
   }
 }
 </script>
@@ -41,7 +46,7 @@ export default {
 ### pdf文档预览
 ```vue
 <template>
-  <vue-office-pdf :src="pdf"/>
+  <vue-office-pdf :src="pdf" @rendered="rendered"/>
 </template>
 
 <script>
@@ -56,6 +61,11 @@ export default {
     return {
       pdf: 'http://static.shanhuxueyuan.com/test.pdf' //设置文档地址
     }
+  },
+  methods:{
+    rendered(){
+      console.log("渲染完成")
+    }
   }
 }
 </script>

examples/components/PdfDemo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="pdf-demo">
-    <vue-office-pdf  :src="src"/>
+    <vue-office-pdf  :src="src" @rendered="rendered"/>
   </div>
 </template>
 
@@ -12,6 +12,11 @@ export default {
     return {
       src:'http://static.shanhuxueyuan.com/test.pdf'
     }
+  },
+  methods:{
+    rendered(){
+      console.log("加载完成")
+    }
   }
 }
 </script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-office",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "通过Vue开发的办公文档预览组件，支持docx、pdf、ppt、excel的预览",
   "main": "lib/index.js",
   "author": "hit757",

packages/docx/src/docx.js

@@ -13,7 +13,7 @@ function fetchDocx(src, options) {
 function render(data, container){
     if(!data){
         container.innerHtml = ''
-        return
+        return Promise.resolve()
     }
     let blob
     if(data instanceof Blob){

packages/docx/src/main.vue

@@ -9,9 +9,9 @@ export default {
   name: "VueOfficeDocx",
   props: {
     src: [String, ArrayBuffer, Blob],
-    requestOptions:{
+    requestOptions: {
       type: Object,
-      default: ()=>({})
+      default: () => ({})
     }
   },
   watch: {
@@ -19,21 +19,27 @@ export default {
       handler(val) {
         if (val) {
           this.init()
-        }else{
-          docx.render('', this.$refs["vue-office-docx"])
+        } else {
+          docx.render('', this.$refs["vue-office-docx"]).then(() => {
+            this.$emit('rendered')
+          })
         }
       }
     }
   },
   mounted() {
-    if(this.src){
+    if (this.src) {
       this.init()
     }
   },
   methods: {
-    init(){
-      docx.getData(this.src, this.requestOptions).then(res =>{
-        docx.render(res, this.$refs["vue-office-docx"])
+    init() {
+      docx.getData(this.src, this.requestOptions).then(res => {
+        docx.render(res, this.$refs["vue-office-docx"]).then(() => {
+          this.$emit('rendered')
+        })
+      }).catch(e => {
+        this.$emit('error', e)
       })
     }
   }

packages/pdf/src/main.vue

@@ -13,6 +13,7 @@
 import {worker} from './worker'
 import {pdfjsLib} from './pdf'
 import loadScript from "./utils/loadScript";
+
 const pdfJsLibSrc = `data:text/javascript;base64,${pdfjsLib}`;
 const PdfJsWorkerSrc = `data:text/javascript;base64,${worker}`;
 
@@ -57,12 +58,13 @@ export default {
         return
       }
       const loadingTask = window.pdfjsLib.getDocument(this.src);
-      loadingTask.promise
-          .then((pdfDocument) => {
-            this.document = pdfDocument;
-            this.numPages = pdfDocument.numPages;
-            this.renderPage(1)
-          })
+      loadingTask.promise.then((pdfDocument) => {
+        this.document = pdfDocument;
+        this.numPages = pdfDocument.numPages;
+        this.renderPage(1)
+      }).catch((e) => {
+        this.$emit('error', e)
+      })
     },
     renderPage(num) {
       this.document.getPage(num).then((pdfPage) => {
@@ -78,12 +80,14 @@ export default {
         renderTask.promise.then(() => {
           if (this.numPages > num) {
             this.renderPage(num + 1);
+          } else {
+            this.$emit('rendered')
           }
-        }).catch(() => {
-
+        }).catch((e) => {
+          this.$emit('error', e)
         });
-      }).catch(() => {
-
+      }).catch((e) => {
+        this.$emit('error', e)
       });
 
     }