前端文件word Excel pdf PPT预览

组件一

bash 复制代码

<template>
    <j-modal
      :visible="visible"
      :fullscreen="fileType!=='other'&&fileType!=='word'"
      @ok="handleOk"
      :width="1200"
      @cancel="handleCancel"

    >
        <vue-office-docx
          v-if="fileType==='word'"
          :src="fileUrl"
          style="height: 100vh"
          @rendered="renderedHandler"
          @error="errorHandler"
          :request-options="headers"
        />
      <vue-office-excel
          v-if="fileType==='excel'"
          :src="fileUrl"
          style="height: 100%"
          @rendered="renderedHandler"
          @error="errorHandler"
          :request-options="headers"
        />
      <vue-office-pdf
        v-if="fileType==='pdf'"
        :src="fileUrl"
        style="height: 100vh"
        @rendered="renderedHandler"
        @error="errorHandler"
      />
      <div v-if="fileType==='image'">
        <img :src="fileUrl" style="height: 80%;"></img>
      </div>
      <div v-if="fileType==='video'" style="margin:auto 0 ">
        <video :src="fileUrl" :controls="true" style="height: 80%;" :autoplay="false"></video>
      </div>
      <div v-if="fileType==='radio'">
        <audio :src="fileUrl" :controls="true" :autoplay="false"></audio>
      </div>
      <div v-if="fileType==='other'">
        <a-row>
          该文件格式暂不支持预览，请下载后查看
        </a-row>
        <br>
        <a-row>
          <a-button type="primary" @click="downloadFile">下载</a-button>
        </a-row>
      </div>
      <ppt-view :src="fileUrl" v-if="fileType==='pptx'"></ppt-view>
    </j-modal>
</template>
<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'
import VueOfficePdf from '@vue-office/pdf'
import PptView from './PptView'
//引入相关样式
import '@vue-office/docx/lib/index.css'
import '@vue-office/excel/lib/index.css'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
export default {
  name: 'filePreviewDialog',
  components: {
    VueOfficeDocx,
    VueOfficeExcel,
    VueOfficePdf,
    PptView
  },
  data() {
    return {
      fileType:'',
      fileUrl: '',
      fileName: '',
      visible: false,
      headers: '',
      baseDomain:window._CONFIG['domianURL']+'/sys/common/static/'
    };
  },
  created() {
    const token = Vue.ls.get(ACCESS_TOKEN);
    //---------------------------- begin 图片左右换位置 -------------------------------------
    this.headers = {"X-Access-Token":token};
  },
  methods: {
    init(file) {
      this.fileUrl=this.baseDomain+file.fileUrl;
      this.fileName=file.fileName
      this.fileType=file.fileSuffix
      console.log("文件地址：", this.fileUrl,"文件名字", this.fileName, "文件类型", this.fileType)
    },
    renderedHandler() {
      console.log("渲染完成")
    },
    errorHandler(e) {
      if (e.status == 404) {
        this.$message.error("该文件未找到！")
      }
    },

    handleOk() {
      this.visible = false;
    },
    handleCancel() {
      this.visible = false;
    },
    downloadFile() {
      const tag = document.createElement("a");
      tag.style.display = 'none';
      tag.target = '_blank';
      tag.href = this.fileUrl;
      tag.download = this.fileName;
      document.body.appendChild(tag);
      tag.click();
      document.body.removeChild(tag);
    }

  },

}
</script>

<style scoped>
/deep/ .ant-modal-footer{
  display: none;
}
.vue-office-docx .docx-wrapper>section.docx {
  margin-bottom:5px;
  width: 50vw!important;
}
</style>

PPT组件二

1.在pptx.js官网下载压缩包
pptx

（2）选择版本下载

2.在public文件夹中添加pptxjs依赖文件

3.在index.html中引入

bash 复制代码

    <link rel="stylesheet" href="/PPTXjs/css/pptxjs.css" />
 
    <link rel="stylesheet" href="/PPTXjs/css/nv.d3.min.css" />
    <!-- for charts graphs -->
 
    <script
      type="text/javascript"
      src="/PPTXjs/js/jquery-1.11.3.min.js"
    ></script>
 
    <script type="text/javascript" src="/PPTXjs/js/jszip.min.js"></script>
    <!-- v2.. , NOT v.3.. -->
 
    <script type="text/javascript" src="/PPTXjs/js/filereader.js"></script>
    <!--https://github.com/meshesha/filereader.js -->
 
    <script type="text/javascript" src="/PPTXjs/js/d3.min.js"></script>
    <!-- for charts graphs -->
 
    <script type="text/javascript" src="/PPTXjs/js/nv.d3.min.js"></script>
    <!-- for charts graphs -->
 
    <script type="text/javascript" src="/PPTXjs/js/pptxjs.js"></script>
 
    <script type="text/javascript" src="/PPTXjs/js/divs2slides.js"></script>
    <!-- for slide show -->

4.在页面中使用

bash 复制代码

<template>
  <div id="pptx"></div>
</template>

<script>
export default {
  name: 'PptView',
  mounted() {
    this.pptxShow(this.src);
  },
  methods: {
    pptxShow(src) {
      this.$nextTick(() => {
        $("#pptx").pptxToHtml({
          pptxFileUrl: src,
          slidesScale: "100%",
        });
      });
    },
  },
  props: {
    src: {
      type: String,
      required: true,
    },
  },
}
</script>

<style scoped>

</style>