jonhon-mes-web/src/components/basic-import/main.vue

<template>
    <el-dialog :title="title" append-to-body :modelValue="importBox" width="555px" @close="closeDialog">
        <avue-form :option="importOption" v-model="importForm" :upload-after="uploadAfter"
        :upload-error="uploadError">
        <template #excelTemplate>
            <el-button type="primary" @click="handleTemplate">
            点击下载<i class="el-icon-download el-icon--right"></i>
            </el-button>
        </template>
        </avue-form>
    </el-dialog>
</template>

<script>
import { exportBlob } from '@/api/common';
import website from '@/config/website';
import { getToken } from '@/utils/auth';
import { downloadXls } from '@/utils/util';
export default {
    props: {
        title:{
            type:String,
            default:'导入'
        },
        isShow:{
            type:Boolean,
            default:false
        },
        templateUrl:{
            type:String,
            default:''
        },
        templateName:{
            type:String,
            default:'模板'
        },
        importUrl:{
            type:String,
            default:''
        },
        showTips:{
            type:String,
            default:'请上传 .xls,.xlsx 标准格式文件'
        }
    },
    data(){
        return{
            importBox:false,
            importForm:{},
            importOption:{
                submitBtn: false,
                emptyBtn: false,
                column: [
                    {
                        label: '模板上传',
                        prop: 'excelFile',
                        type: 'upload',
                        drag: true,
                        loadText: '模板上传中，请稍等',
                        span: 24,
                        propsHttp: {
                            res: 'data',
                        },
                        tip: this.showTips,
                        action: this.importUrl,
                    },
                    {
                        label: '模板下载',
                        prop: 'excelTemplate',
                        formslot: true,
                        span: 24,
                    },
                ],
            }
        }
    },
    watch: {
        isShow(newVal) {
            this.importBox = newVal;
        }
    },
    mounted(){
        console.log('isShowImport=================',this.isShow)
        this.importBox = this.isShow
    },
    methods:{
        closeDialog(val) {
            this.importBox = false;
            this.$emit('closeDialog',val);
        },
        handleTemplate() {
            const url = `${this.templateUrl}?${this.website.tokenHeader}=${getToken()}`;
            console.log('下载模板URL:', url);
            console.log('模板文件名:', this.templateName);

            exportBlob(url).then(res => {
                console.log('API返回状态:', res.status);
                console.log('res.data类型:', typeof res.data);
                console.log('res.data instanceof Blob:', res.data instanceof Blob);
                console.log('res.data size:', res.data?.size);
                console.log('res.data type:', res.data?.type);

                if (!res.data || res.data.size === 0) {
                    this.$message.error('下载失败，文件内容为空');
                    return;
                }

                // 验证文件内容是否是有效的Excel文件
                this.validateExcelBlob(res.data).then(isValid => {
                    if (!isValid) {
                        console.error('下载的文件不是有效的Excel文件');
                        this.$message.error('下载的文件格式不正确');
                        return;
                    }

                    // 确保文件名有正确的扩展名
                    let fileName = this.templateName;
                    if (!fileName.endsWith('.xlsx') && !fileName.endsWith('.xls')) {
                        fileName += '.xlsx';
                    }

                    console.log('开始下载文件:', fileName);
                    downloadXls(res.data, fileName);
                    this.$message.success('模板下载成功');
                }).catch(error => {
                    console.error('验证文件失败:', error);
                    // 即使验证失败也尝试下载
                    let fileName = this.templateName;
                    if (!fileName.endsWith('.xlsx') && !fileName.endsWith('.xls')) {
                        fileName += '.xlsx';
                    }
                    downloadXls(res.data, fileName);
                    this.$message.success('模板下载成功');
                });
            }).catch(error => {
                console.error('下载模板失败:', error);
                this.$message.error('下载失败，请检查网络或稍后重试');
            });
        },
        validateExcelBlob(blob) {
            return new Promise((resolve) => {
                const reader = new FileReader();
                reader.onloadend = (e) => {
                    const arr = new Uint8Array(e.target.result);
                    const header = Array.from(arr.slice(0, 8)).map(b => b.toString(16).padStart(2, '0')).join(' ');
                    console.log('文件头 (前8字节):', header);

                    // 检查XLSX (ZIP格式): 50 4B 03 04
                    const isXlsx = header.startsWith('50 4b 03 04');
                    // 检查XLS: D0 CF 11 E0 A1 B1 1A E1
                    const isXls = header.toLowerCase().startsWith('d0 cf 11 e0 a1 b1 1a e1');

                    console.log('是XLSX格式:', isXlsx);
                    console.log('是XLS格式:', isXls);

                    resolve(isXlsx || isXls);
                };
                reader.onerror = () => resolve(true); // 如果读取失败，假设文件是有效的
                reader.readAsArrayBuffer(blob.slice(0, 8));
            });
        },
        uploadAfter(res, done, loading, column) {
            this.closeDialog(true)
            done();
        },
        uploadError(error, column){
            console.log('error-------------',error)
            this.closeDialog()
        }
    }
}
</script>

<style>

</style>