前端文件word Excel pdf PPT预览

组件一

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134

PPT组件二

1.在pptx.js官网下载压缩包
pptx
（2）选择版本下载

2.在public文件夹中添加pptxjs依赖文件
3.在index.html中引入

    <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 -->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

4.在页面中使用

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32