pdf以及其他文件预览

vue3实现文件预览，其实还是要下载，先下载下来然后实现预览，代码：

<previewFile
            :fileUrl="fileUrl"
            :fileType="fileTypeDetail"
            v-model:visible="previewVisible"
        />
//点击事件触发下载预览
const appraisalProgram = () => {
    handlePreview({ attachment: 'indicator-management/mass-production/dashboard/考核方案.pdf' });
};

const fileUrl = ref('');
const previewVisible = ref(false);
const fileTypeDetail = ref('');
// 附件预览
const handlePreview = async (obj) => {
    const fileType = obj.attachment.slice(obj.attachment.lastIndexOf('.') + 1).toLowerCase();
    fileTypeDetail.value = fileType;
    let fileName = obj.attachment;
    const regex = /\.(\w+)$/;
    const match = fileName.match(regex);
    const type = match ? match[1].toLocaleUpperCase() : '';
    const imgType = ['PNG', 'IMG', 'JPG', 'JPEG', 'GIF', 'SVG'];
    const pdfType = ['PDF'];
    commonApis
        .exportTemplate({
            filePath: fileName
        })
        .then((res) => {
            if (imgType.includes(type)) {
                const blob = new Blob([res.data], {
                    type: 'image/jpeg' || 'image/png'
                });
                const url = window.URL.createObjectURL(blob);
                // window.open(url, '_blank');  //如果打开新页面可以直接用
                fileUrl.value = url;
                previewVisible.value = true;  //这里是打开了一个抽屉组件
            } else if (pdfType.indexOf(type) > -1) {
                const blob = new Blob([res.data], {
                    type: 'application/pdf'
                });
                const url = window.URL.createObjectURL(blob);
                fileUrl.value = url;
                previewVisible.value = true;
                // window.open(url, '_blank');  //如果打开新页面可以直接用
            }
        });
};

关于previewFile组件也小小的展示下，其实就是用插件展示不同类型的文件：

<template>
    <ghy-drawer
        :width="'calc(100vw - 208px)'"
        title="文件预览"
        v-bind="$attrs"
        @cancel="onClose"
        :footer="false"
        unmountOnClose
    >
        <div
            v-if="
                props.fileType === 'jpg' ||
                props.fileType === 'png' ||
                props.fileType === 'jpeg' ||
                props.fileType === 'JPG' ||
                props.fileType === 'PNG' ||
                props.fileType === 'JPEG' ||
                props.fileType === 'svg'
            "
        >
            <img :src="props.fileUrl" style="width: 80%; height: 80%; margin: auto" />
        </div>
        <div v-if="props.fileType === 'pdf'">
            <VueOfficePdf
                :src="props.fileUrl"
                @rendered="renderedHandler"
                @error="errorHandler"
            ></VueOfficePdf>
        </div>
        <div v-if="props.fileType === 'doc' || props.fileType === 'docx'">
            <VueOfficeDocx :src="props.fileUrl"></VueOfficeDocx>
        </div>
        <div v-if="props.fileType === 'xls' || props.fileType === 'xlsx'">
            <VueOfficeExcel :src="props.fileUrl"></VueOfficeExcel>
        </div>
    </ghy-drawer>
</template>

<script setup>
import VueOfficePdf from '@vue-office/pdf';
import VueOfficeExcel from '@vue-office/excel';
import VueOfficeDocx from '@vue-office/docx';
import '@vue-office/docx/lib/index.css';
const emits = defineEmits(['update:visible']);

const onClose = () => {
    emits('update:visible', false);
};
const props = defineProps({
    fileUrl: {
        type: String,
        default: ''
    },
    fileType: {
        type: String,
        default: ''
    }
});

const renderedHandler = () => {
    console.log('渲染完成');
};
const errorHandler = () => {
    console.log('渲染失败');
};

watch(
    () => props.fileUrl,
    (value) => {
        console.log('>>>>>>>>>>>>>>>>>>>>>>>fileType', props.fileType);
        console.log('>>>>>>>>>>>>>>>>>>>>>>>fileUrl.value', props.fileUrl);
    }
);
emits('update:visible', false);
</script>

<style lang="less" scoped></style>