在线预览文件-word、excel、图片、ppt

vue中引入插件 

VueOffice，npm下载，以下插件需要单独下载

VueOfficeDocx

VueOfficeExcel

<template>
    <div style="height: 700px; overflow: auto;"><vue-office-docx style="min-height: 700px;" :src="excel" @rendered="rendered"/></div>
</template>
<script>
import VueOfficeDocx from '@vue-office/docx'; // VueOfficeExcel类似
export default {
    components: { VueOfficeDocx },
    data() {
        excel: '', // excel可以为链接，也可以是后端返回的二进制文件
    },
    methods: {
        rendered() {},
    }
}
</script>

ppt预览：pptx插件下载，直接放当前文件夹下面，需要的文件有：jquery.js  jszip.js  filereader.js  pptx.js  pptxjs.css;

在pptxjs官网下载

<template>
    <div style="width: 100%; height: 700px; overflow: auto;"><div id="slide-resolte-contaniner" style="width: 100%; min-height: 700px;"></div></div>
</template>

<script>
export default {
    mounted() {
        const jqueryScript = document.createElement('script');
        jqueryScript.src = '/js/jquery.js'; // jQuery的JS文件路径
        jqueryScript.onload = () => {
            this.$ = window.jQuery;
            const jszip = document.createElement('script');
            jszip.src = '/js/jszip.js';
            const fileReaderJS = document.createElement('script');
            fileReaderJS.src = '/js/filereader.js';
            fileReaderJS.onload = () => {
                const pptxScript = document.createElement('script');
                pptxScript.src = '/js/pptx.js'; // pptx.js的JS文件路径
                document.body.appendChild(pptxScript);
            };
            document.body.appendChild(jszip);
            document.body.appendChild(fileReaderJS);
        };
        document.body.appendChild(jqueryScript);
        this.$nextTick(() => {
            this.loadData();
        });
    },
    methods: {
        loadData() {
            this.$nextTick(() => {
                    this.$('#slide-resolte-contaniner').pptxToHtml({
                        pptxFileUrl: res.data,
                        pptxFileName: record.fileName,
                        slidesScale: '50%',
                        slideMode: false,
                        keyBoardShortCut: false,
                    });
                });
        },
    },
}
</script>

主页面index.vue

<template>
    <div>
        <excel-vue v-if="showModalExcel" ref="excel"></excel-vue>
        <docx-vue v-if="showModalDocx" ref="docx"></docx-vue>
        <ppt-vue v-if="showModalPpt" ref="ppt"></ppt-vue>
    </div>
</template>

<script>
import Api from '@/api';
import excelVue from './excel';
import docxVue from './docx';
import pptVue from './ppt';
export default {
    components: {
        excelVue,
        docxVue,
        pptVue,
    },
    data() {
        return {
            showModalExcel: false,
            showModalDocx: false,
            showModalPpt: false,
        };
    },
    methods: {
        handlePreview(record) {
            let { fileType, fileName } = record;
            // .pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.jpg,.png
            if (fileType == 'xlsx' || fileType == 'xls') {
                this.showModalExcel = true;
                setTimeout(() => {
                    this.$refs.excel.init(record);
                }, 100);
            } else if (fileType == 'docx' || fileType == 'doc') {
                this.showModalDocx = true;
                setTimeout(() => {
                    this.$refs.docx.init(record);
                }, 100);
            } else if (fileType == 'ppt' || fileType == 'pptx') {
                this.showModalPpt = true;
                setTimeout(() => {
                    this.$refs.ppt.init(record);
                }, 100);
            } else {
                Api.preview({ id: record.id, fileName: record.fileName }).then(res => {
                    const blob = new Blob([res.data], { type: fileType == 'pdf' ? 'application/pdf' : ('image/' + record.fileType) }); // 根据实际情况设置 MIME 类型

                    // 创建临时的 URL
                    const imageUrl = URL.createObjectURL(blob);
                    window.open(imageUrl, fileName, 'height=700,width=1000');
                });
            }
        },
    },
};
</script>

接口中：

export function preview(parameter) {
    return axios({
        url: url,
        method: 'get',
        params: parameter,
        responseType: 'blob',
    });
}