增加渲染完成事件

This commit is contained in:
liyulin 2022-11-14 16:56:00 +08:00
parent 62128e579f
commit 1b7ede22ec
6 changed files with 48 additions and 23 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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",

View File

@ -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){

View File

@ -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)
})
}
}

View File

@ -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)
});
}