mirror of
https://github.com/501351981/vue-office.git
synced 2025-07-05 07:11:24 +08:00
增加渲染完成事件
This commit is contained in:
parent
62128e579f
commit
1b7ede22ec
14
README.md
14
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>
|
||||
|
@ -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>
|
||||
|
@ -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",
|
||||
|
@ -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){
|
||||
|
@ -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)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
@ -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)
|
||||
});
|
||||
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user