vue中预览视频，word，pdf，xlsx

前提，下载依赖

#docx文档预览
npm install @vue-office/docx

#excel文档预览
npm install @vue-office/excel

#pdf文档预览
npm install @vue-office/pdf

如果vue版本是vue2.6版本或者以下版本还需要安装@vue/composition-api

npm install @vue/composition-api

1、预览word

<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="visible"
    :append-to-body="true"
    width="80%"
    fullscreen
    title="文件预览">
    <vue-office-docx
      :src="docxUrl"
      style="height: 100vh"
      @rendered="renderedHandler"
      @error="errorHandler"
    />
  </el-dialog>
</template>

<script>
import VueOfficeDocx from '@vue-office/docx'
export default {
  name: 'PdfView',
  components: {
    VueOfficeDocx
  },
  data() {
    return {
      docxUrl: '/pdf-test.docx',
      visible: false
    }
  },
  mounted() {},
  methods: {
    init(src) {
      this.docxUrl = src
      this.visible = true
    },
    renderedHandler() {
      console.log('渲染完成')
    },
    errorHandler() {
      console.log('渲染失败')
    }
  }
}
</script>
    <style scoped>
    </style>

2、预览pdf

<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="visible"
    :append-to-body="true"
    width="80%"
    fullscreen
    title="文件预览">
    <vue-office-pdf
      :src="pdfUrl"
      style="height: 100vh"
      @rendered="renderedHandler"
      @error="errorHandler"
    />
  </el-dialog>
</template>

<script>
import VueOfficePdf from '@vue-office/pdf'
export default {
  name: 'PdfView',
  components: {
    VueOfficePdf
  },
  data() {
    return {
      pdfUrl: '/pdf-test.pdf',
      visible: false
    }
  },
  mounted() {},
  methods: {
    init(src) {
      this.pdfUrl = src
      this.visible = true
    },
    renderedHandler() {
      console.log('渲染完成')
    },
    errorHandler() {
      console.log('渲染失败')
    }
  }
}
</script>
  <style scoped>
  </style>

3、excel

<template>
    <vue-office-excel
        :src="excel"
        style="height: 100vh;"
        @rendered="renderedHandler"
        @error="errorHandler"
    />
</template>

<script>
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'

export default {
    components: {
        VueOfficeExcel
    },
    data() {
        return {
            excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//设置文档地址
        }
    },
    methods: {
        renderedHandler() {
            console.log("渲染完成")
        },
        errorHandler() {
            console.log("渲染失败")
        }
    }
}
</script>

4、视频

<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="visible"
    :append-to-body="true"
    width="60%"
    fullscreen
    title="视频播放">
    <div>
      <video :src="videoUrl" width="100%" height="100%" controls/>
      <!-- <el-button @click="playVideo">播放视频</el-button>
      <el-button @click="pauseVideo">暂停视频</el-button> -->
    </el-button></div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: 'your-video-url.mp4', // 视频文件的URL
      videoPlayer: null,
      visible: false
    }
  },
  mounted() {
    this.videoPlayer = this.$el.querySelector('video')
  },
  methods: {
    init(src) {
      this.videoUrl = src
      this.visible = true
    },
    playVideo() {
      if (this.videoPlayer) {
        this.videoPlayer.play()
      }
    },
    pauseVideo() {
      if (this.videoPlayer) {
        this.videoPlayer.pause()
      }
    }
  }
}
</script>

注意：如果返回的不是文件地址，而是文件流

可以调用接口获取文件的ArrayBuffer数据，传递给src属性，业绩就是将文件流转化为ArrayBuffer数据

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

<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'

export default {
    components:{
        VueOfficeDocx
    },
    data(){
        return {
            docx: ''
        }
    },
    mounted(){
        fetch('你的API文件地址', {
            method: 'post'
        }).then(res=>{
            //读取文件的arrayBuffer
            res.arrayBuffer().then(res=>{
                this.docx = res
            })
        })
    },
    methods:{
        rendered(){
            console.log("渲染完成")
        }
    }
}
</script>