easydo-mes-web/src/components/scUpload/fileViewer.vue

<template>
	<div class="sc-file-viewer">
        <el-dialog v-model="visible" fullscreen :show-close="false" @closed="$emit('closed')">
            <div class="sc-file-viewer__header">
                <div class="sc-file-viewer__title">
                    {{ fileName }}
                    <button class="el-button el-button--primary" aria-label="download" type="button" @click="downloadFile">
                        <sc-iconify icon="ant-design:download-outlined" size="20"></sc-iconify>下载
					</button>
                </div>
				
                <button class="el-button is-link" aria-label="close" type="button" @click="visible = false">
                    <sc-iconify icon="ant-design:close-outlined"></sc-iconify>
                </button>
            </div>
            
            <div v-loading="loading" class="sc-file-viewer__content">
                <component :is="`vue_office_${fileTypes[fileType].split('.')[0]}`" :src="'/minio' + filePath" :options="options" @rendered="loading = false" @error="loading = false"></component>
            </div>
        </el-dialog>
        
	    <video-viewer v-if="showVideoViewer" :videoUrl="filePath" hideOnModal @close="showVideoViewer = false"></video-viewer>
    </div>
</template>

<script>
import { VxeUI } from "vxe-pc-ui";
import { fileTypes, officeOptions } from "./main";

import vue_office_docx from "@vue-office/docx";
import vue_office_excel from "@vue-office/excel";
import vue_office_pdf from "@vue-office/pdf";
import vue_office_txt from "@/components/scUpload/txtViewer";
import videoViewer from "@/components/scUpload/videoViewer";

import "@vue-office/docx/lib/index.css";
import "@vue-office/excel/lib/index.css";

export default {
    emits: ["closed"],
    
    components: {
        vue_office_docx,
        vue_office_excel,
        vue_office_pdf,
        vue_office_txt
    },

    data() {
        return {
            fileTypes,

            visible: false,
            loading: false,
            fileName: null,
            fileType: null,
            filePath: null,
            options: {},

            showVideoViewer: false
        }
    },

    methods: {
        init(uploadFile) {
            this.fileName = uploadFile.name;
            this.filePath = uploadFile.path;
            this.fileType = uploadFile.contentType;
            if (!fileTypes[this.fileType]) {
                ElMessage.warning("当前只支持预览 .png/.jpg/.map4/.avi/.txt/.docx/.pdf/.xlsx/.xls 格式文件， 文件已下载");
                this.downloadFile();
            } else {
                if (fileTypes[this.fileType] == "image") {
                    VxeUI.previewImage({
                        showDownloadButton: true,
                        urlList: ["/minio" + uploadFile.path],
                        downloadMethod: () => this.downloadFile()
                    })
                } else if (fileTypes[this.fileType] == "video") this.showVideoViewer = true;
                else {
                    this.loading = true;
                    this.visible = true;
                    this.options = officeOptions[fileTypes[this.fileType].split(".")[0]] || {};
                    if (fileTypes[this.fileType].includes(".")) this.options.xls = fileTypes[this.fileType].split(".")[1] == "xls";
                }
            }
        },

        downloadFile() {
            this.$API.common.minio.download(this.filePath).then(res => {
                const a = document.createElement("a");
                const blob = new Blob([res], { type: this.fileType });
                a.download = this.fileName;
                a.href = URL.createObjectURL(blob);
                a.click();
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.sc-file-viewer {
    --el-overlay-color-lighter: gray;
    :deep(.el-dialog) {
        --el-dialog-bg-color: transparent;
        padding: 0;

        .el-dialog__header {padding: 0;}

        .el-dialog__body {
            height: 100%;
            padding: 0;

            .sc-file-viewer__header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: var(--el-dialog-padding-primary);
                background: #fff;

                .sc-file-viewer__title {
                    line-height: var(--el-dialog-font-line-height);
                    font-size: var(--el-dialog-title-font-size);
                    color: var(--el-text-color-primary);

                    button {
                        margin-left: var(--el-dialog-padding-primary);

                        svg {
                        margin-right: 6px;
                        }
                    }
                }

                .el-button.is-link:hover {color: var(--el-color-primary);}
            }

            .sc-file-viewer__content {
                height: calc(100% - 64px - 2 * var(--el-dialog-padding-primary));
                padding: var(--el-dialog-padding-primary);
            }
        }
    }
}
</style>