前端文件word Excel pdf PPT预览

组件一

<template><j-modal:visible="visible":fullscreen="fileType!=='other'&&fileType!=='word'"@ok="handleOk":width="1200"@cancel="handleCancel"><vue-office-docxv-if="fileType==='word'":src="fileUrl"style="height: 100vh"@rendered="renderedHandler"@error="errorHandler":request-options="headers"/><vue-office-excelv-if="fileType==='excel'":src="fileUrl"style="height: 100%"@rendered="renderedHandler"@error="errorHandler":request-options="headers"/><vue-office-pdfv-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.fileNamethis.fileType=file.fileSuffixconsole.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中引入

    <link rel="stylesheet" href="/PPTXjs/css/pptxjs.css" /><link rel="stylesheet" href="/PPTXjs/css/nv.d3.min.css" /><!-- for charts graphs --><scripttype="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.在页面中使用

<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>