diff --git a/README.md b/README.md index 6f15619..5b139ea 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ npm install vue-office ### docx文档的预览 ```vue @@ -41,7 +46,7 @@ export default { ### pdf文档预览 ```vue diff --git a/examples/components/PdfDemo.vue b/examples/components/PdfDemo.vue index 3b4256d..3e53222 100644 --- a/examples/components/PdfDemo.vue +++ b/examples/components/PdfDemo.vue @@ -1,6 +1,6 @@ @@ -12,6 +12,11 @@ export default { return { src:'http://static.shanhuxueyuan.com/test.pdf' } + }, + methods:{ + rendered(){ + console.log("加载完成") + } } } diff --git a/package.json b/package.json index 1b63e0d..9c8a8ad 100644 --- a/package.json +++ b/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", diff --git a/packages/docx/src/docx.js b/packages/docx/src/docx.js index 39d5453..f8ece79 100644 --- a/packages/docx/src/docx.js +++ b/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){ diff --git a/packages/docx/src/main.vue b/packages/docx/src/main.vue index 96212e0..5d151cf 100644 --- a/packages/docx/src/main.vue +++ b/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) }) } } diff --git a/packages/pdf/src/main.vue b/packages/pdf/src/main.vue index b0f1bbf..a64476a 100644 --- a/packages/pdf/src/main.vue +++ b/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) }); }