pdf、docx、图片、音频等预览

1.新建一个文件previewFile.vue，内容如下：

<template>
  <div>
    <a-modal
      :zIndex="9999"
      v-model="visible"
      title="查看文件"
      centered
      :mask-closable="false"
      destroy-on-close
      :footer="null"
      width="1300px"
      :bodyStyle="{maxHeight:'700px',overflowY:'auto'}"
    >
      <iframe style="width: 100%; height: calc(95vh - 10.053vw)" :src="src" v-if="src.indexOf('.pdf') != -1"></iframe>
      <div class="docx-container" v-if="src.indexOf('.docx') != -1">
        <div ref="file" ></div>
      </div>
      <vue-aliplayer-v2 :source="src" ref="VueAliplayerV2" :options="options" v-else-if="src.indexOf('.mp4') != -1" />
      <audio :src="src" controls v-else-if="src.indexOf('.mp3') != -1"></audio>
      <img style="width: 100%" v-else :src="src" />
    </a-modal>
  </div>
</template>

<script>
import VueAliplayerV2 from 'vue-aliplayer-v2'
import axios from 'axios'
import { renderAsync } from 'docx-preview'

export default {
  components: {
    VueAliplayerV2,
  },
  data() {
    return {
      visible: false,
      src: '', // pdf文件地址

      options: {
        // source:'http://player.alicdn.com/video/aliyunmedia.mp4',
        isLive: false, //切换为直播流的时候必填
        // format: 'm3u8'  //切换为直播流的时候必填
      },
    }
  },

  methods: {
    renderFile() {
      axios({
        method: 'get',
        responseType: 'blob',
        url: this.src,
      }).then((response) => {
        renderAsync(response.data, this.$refs.file)
      })
    },
    init(src) {
      console.log(src)
      this.visible = true
      this.src = src
      if (this.src.indexOf('.docx') != -1) {
        this.renderFile()
      }
    },

    play() {
      this.$refs.VueAliplayerV2.play()
    },
    // 暂停播放
    pause() {
      this.$refs.VueAliplayerV2.pause()
    },
    replay() {
      this.$refs.VueAliplayerV2.replay()
    },
    getStatus() {
      const status = this.$refs.VueAliplayerV2.getStatus()
      console.log(`getStatus:`, status)
      alert(`getStatus:${status}`)
    },
  },
}
</script>

<style lang="less" scoped>

.docx-container{
  // width: 100%;
  box-sizing: border-box;
  padding: 20px;
}
.docx-container ::v-deep .docx-wrapper {
  background-color: #fff;
  padding: 20px 20px;
}
.docx-container ::v-deep .docx-wrapper > section.docx {
  width: auto !important;
  padding: 0rem !important;
  min-height: auto !important;
  box-shadow: none;
  margin-bottom: 0;
  overflow-y: scroll;
  // height: 100vh;
}

.docx-container ::v-deep .docx-wrapper > section.docx::-webkit-scrollbar {
  display: none;
}
</style>

2.将previewFile.vue当做组件引入即可使用