vue2
在線預覽 docx、pdf、excel文檔

docx

npm install @vue-office/docx vue-demi@0.14.6 指定版本
npm install @vue-office/docx vue-demi

<template><VueOfficeDocx :src="pdf" style="height: 100vh;" @rendere="rendereHandler" @error="errorHandler" />
</template>

pdf

npm install @vue-office/pdf vue-demi@0.14.6 指定版本
npm install @vue-office/pdf vue-demi

<template><VueOfficePdf :src="pdf" style="height: 100vh;" @rendere="rendereHandler" @error="errorHandler" />
</template>

excel

npm install @vue-office/excel vue-demi@0.14.6 指定版本
npm install @vue-office/excel vue-demi

<template><VueOfficeExcel :src="pdf" style="height: 100vh;" @rendere="rendereHandler" @error="errorHandler" />
</template>

vue版本小于2.6的需下載
npm install @vue/composition-api/

vue-office 適用于vue2/3

源碼：源碼git倉庫

// docx
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'//  pdf
//import VueOfficePdf from '@vue-office/pdf'
//import '@vue-office/docx/lib/index.css'//  excel
//import VueOfficeExcel from '@vue-office/excel'
//import '@vue-office/excel/lib/index.css'
export default {name: 'pdf在線瀏覽',components: {VueOfficeDocx},data () {return {pdf: 'http://static.shanhuxueyuan.com/test6.docx' 
//            pdf: 'http://static.shanhuxueyuan.com/test6.pdf' 
//            pdf: 'http://static.shanhuxueyuan.com/test6.excel' }},methods: {rendereHandler() {console.log('渲染成功');},errorHandler() {console.log('渲染成功');},}
}
</script>

控制臺報錯：不影響使用

TypeError: ft.defineComponent is not a function

vue-office發現只適用docx格式，doc的不可以，xlx沒找到資源待測

vue-office 文章特點：將docx、pdf、excel三個拆開詳情的解說

vue-office 文章特點：將docx、pdf、excel三種格式文件同步講解，并一起使用

兩篇文章都附帶案例