1、安裝依賴
#docx文檔預(yù)覽組件
npm install @vue-office/docx vue-demi@0.13.11 -S
#excel文檔預(yù)覽組件
npm install @vue-office/excel vue-demi@0.13.11 -S
#pdf文檔預(yù)覽組件
npm install @vue-office/pdf vue-demi@0.13.11 -S
如果是vue2.6版本或以下還需要額外安裝 @vue/composition-api
npm install @vue/composition-api -S
2、預(yù)覽WORD代碼
<template>
<div>
<vue-office-docx :src="docx" style="height: 100vh;" @rendered="rendered" />
</div>
</template>
<script>
//引入VueOfficeDocx組件
import VueOfficeDocx from '@vue-office/docx'
//引入相關(guān)樣式
import '@vue-office/docx/lib/index.css'
export default {
components: {
VueOfficeDocx,
},
data() {
return {
docx: 'http://static.shanhuxueyuan.com/test6.docx', //設(shè)置文檔網(wǎng)絡(luò)地址，可以是相對(duì)地址
}
},
methods: {
rendered() {
console.log('渲染完成')
},
},
}
</script>
<style lang="scss" scoped></style>
3、預(yù)覽EXCEL
<template>
<div>
<vue-office-excel :src="excel" style="height: 100vh;" @rendered="renderedHandler" @error="errorHandler" />
</div>
</template>
<script>
//引入VueOfficeExcel組件
import VueOfficeExcel from '@vue-office/excel'
//引入相關(guān)樣式
import '@vue-office/excel/lib/index.css'
export default {
components: {
VueOfficeExcel,
},
data() {
return {
excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx', //設(shè)置文檔地址
}
},
methods: {
renderedHandler() {
console.log('渲染完成')
},
errorHandler() {
console.log('渲染失敗')
},
},
}
</script>
<style lang="scss" scoped></style>
4、預(yù)覽PDF文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-701960.html
<template>
<div>
<vue-office-pdf :src="pdf" @rendered="renderedHandler" @error="errorHandler" />
</div>
</template>
<script>
//引入VueOfficePdf組件
import VueOfficePdf from '@vue-office/pdf'
export default {
components: {
VueOfficePdf,
},
data() {
return {
pdf: 'http://static.shanhuxueyuan.com/test.pdf', //設(shè)置文檔地址
}
},
methods: {
renderedHandler() {
console.log('渲染完成')
},
errorHandler() {
console.log('渲染失敗')
},
},
}
</script>
<style lang="scss" scoped></style>
5、項(xiàng)目參考地址文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-701960.html
https://github.com/501351981/vue-office.git
到了這里，關(guān)于vue在線預(yù)覽word、excel、PDF的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
