vue-office实现附件在线预览

      <a-modal
                title="预览"
                :footer="null"
                v-model:visible="previewState.previewVisible"
                @cancel="handleCancel"
                width="100vh"
                :body-style="{
                    maxHeight: '800px',
                    overflowY: 'auto'
                }"
                centered
            >
                <div v-if="previewState.isImagePreview">
                    <img :src="previewState.previewImage" alt="附件" style="width: 100%" />
                </div>
                <div v-if="previewState.isDocPreview">
                    <vue-office-docx
                        :src="previewState.previewFileUrl"
                        @rendered="renderedHandler"
                        @error="errorHandler"
                    />
                </div>
                <div v-if="previewState.isPdfPreview">
                    <vue-office-pdf
                        :src="previewState.previewFileUrl"
                        @rendered="renderedHandler"
                        @error="errorHandler"
                    />
                </div>
                <div v-if="previewState.isExcelPreview">
                    <vue-office-excel
                        :src="previewState.previewFileUrl"
                        :options="options"
                        @rendered="renderedHandler"
                        @error="errorHandler"
                    />
                </div>
                <div v-if="previewState.isViedoPreview">
                    <video
                        autoplay
                        :src="previewState.previewFileUrl"
                        id="video-player"
                        controls
                        controlslist="nodownload"
                    ></video>
                </div>
            </a-modal>
  <div
                                        class="file-div"
                                        v-for="(item, index) in record.fileList"
                                        @click="previewAttachment(item)"
                                    >
                                        {{ item.name }}</div
                                    >
                                        import VueOfficePdf from '@vue-office/pdf'
    import VueOfficeExcel from '@vue-office/excel'
    import VueOfficeDocx from '@vue-office/docx'
    const previewState = reactive({
        previewVisible: false,
        previewImage: '',
        previewFileUrl: '',
        isImagePreview: false,
        isDocPreview: false,
        isPdfPreview: false,
        isExcelPreview: false,
        isViedoPreview: false
    })
    function previewAttachment(item) {
        if (item.type.startsWith('image')) {
            previewState.isExcelPreview = false
            previewState.isImagePreview = true
            previewState.isDocPreview = false
            previewState.isViedoPreview = false
            previewState.isPdfPreview = false
            previewState.previewImage = item.url // 设置预览图片的URL
            previewState.previewVisible = true // 显示模态框
        } else if (isDocFile(item.name, '.pdf')) {
            previewState.isImagePreview = false
            previewState.isDocPreview = false
            previewState.isViedoPreview = false
            previewState.isPdfPreview = true
            previewState.isExcelPreview = false
            previewState.previewFileUrl = item.url // 设置预览PDF的URL
            previewState.previewVisible = true // 显示模态框
        } else if (isDocFile(item.name, '.doc')) {
            previewState.isImagePreview = false
            previewState.isDocPreview = true
            previewState.isViedoPreview = false
            previewState.isPdfPreview = false
            previewState.isExcelPreview = false
            previewState.previewFileUrl = item.url // 设置预览WORD的URL
            previewState.previewVisible = true // 显示模态框
        } else if (isDocFile(item.name, '.docx')) {
            previewState.isExcelPreview = false
            previewState.isImagePreview = false
            previewState.isViedoPreview = false
            previewState.isDocPreview = true
            previewState.isPdfPreview = false
            previewState.previewFileUrl = item.url // 设置预览WORD的URL
            previewState.previewVisible = true // 显示模态框
        } else if (isDocFile(item.name, '.xls')) {
            options.value.xls = true
            previewState.isViedoPreview = false
            previewState.isImagePreview = false
            previewState.isDocPreview = false
            previewState.isPdfPreview = false
            previewState.isExcelPreview = true
            previewState.previewFileUrl = item.url // 设置预览EXCEL的URL
            previewState.previewVisible = true // 显示模态框
        } else if (isDocFile(item.name, '.xlsx')) {
            options.value.xls = false
            previewState.isImagePreview = false
            previewState.isDocPreview = false
            previewState.isPdfPreview = false
            previewState.isViedoPreview = false
            previewState.isExcelPreview = true
            previewState.previewFileUrl = item.url // 设置预览EXCEL的URL
            previewState.previewVisible = true // 显示模态框
        } else if (item.type.startsWith('video')) {
            options.value.xls = false
            previewState.isImagePreview = false
            previewState.isDocPreview = false
            previewState.isPdfPreview = false
            previewState.isViedoPreview = true
            previewState.isExcelPreview = false
            previewState.previewFileUrl = item.url // 设置预览EXCEL的URL
            previewState.previewVisible = true // 显示模态框
        } else {
            message.warning('暂不支持的文件格式')
        }
    }
    function isDocFile(fileName, str) {
        return fileName.toLowerCase().endsWith(str)
    }