VUE实现文档预览【pdf,docx,excel】

提示：这篇文档主要依据vue的插件实现文档的页面展示

pdf \ docx \ excel 等类型文件的页面预览

一、安装vue组件

提示：这里可以根据需求安装对应组件

	#docx文档预览组件
npm install @vue-office/docx vue-demi@0.14.6

	#excel文档预览组件
npm install @vue-office/excel vue-demi@0.14.6

	#pdf文档预览组件
npm install @vue-office/pdf vue-demi@0.14.6

如果使用的是vue2.6及以下版本需要额外安装@vue/composition-api

npm install @vue/composition-api

二、文件预览

文件预览（网络地址）

提示：paf、docx、excel 都可以用此方法预览 按需引入

<template>
  <div>
    <vue-office-docx
      :src="docx"
      style="height: 100vh"
      @rendered="renderedHandler"
      @error="errorHandler"
    />
    <vue-office-excel
      :src="excel"
      style="height: 100vh"
      @rendered="renderedHandler"
      @error="errorHandler"
    />
    <vue-office-pdf
      :src="pdf"
      style="height: 100vh"
      @rendered="renderedHandler"
      @error="errorHandler"
    />
  </div>
</template>
<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'
import VueOfficePdf from '@vue-office/pdf'
//引入相关样式
import '@vue-office/docx/lib/index.css'

export default {
    components:{
        VueOfficeDocx,
        VueOfficeExcel ,
        VueOfficePdf 
    },
    data(){
        return {
            docx: '',
            excel:'',
            pdf:''
        }
    },
    mounted(){ 
    },
    methods:{
        methods: {
        renderedHandler() {
            console.log("渲染完成")
        },
        errorHandler() {
            console.log("渲染失败")
        }
    }
}
</script>

文件预览（上传文件）

<template>
    <div>
        <input type="file" @change="changeHandle"/>
        <vue-office-docx :src="src"/>
    </div>
</template>

<script>
import VueOfficeDocx from '@vue-office/docx' 

export default {
    components: {
        VueOfficeDocx
    },
    data(){
        return {
            src: ''
        }
    },
    methods:{
        changeHandle(event){
            let file = event.target.files[0]
            let fileReader = new FileReader()
            fileReader.readAsArrayBuffer(file)
            fileReader.onload =  () => {
                this.src = fileReader.result
            }
        }
    }
}
</script>

文件预览（二进制文件）

<template>
    <vue-office-docx
        :src="src"
        style="height: 100vh;" 
    />
</template>

<script> 
import VueOfficeDocx from '@vue-office/docx' 

export default {
    components:{
        VueOfficeDocx
    },
    data(){
        return {
            src: ''
        }
    },
    mounted(){
        fetch('你的API文件地址', {
            method: 'post'
        }).then(res=>{
            //读取文件的arrayBuffer
            res.arrayBuffer().then(res=>{
                this.src= res
            })
        })
    }, 
}
</script>