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 标准格式文件',
    },
    basicImportSearch: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      importBox: false,
      importForm: {},
      importOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '模板上传',
            prop: 'excelFile',
            type: 'upload',
            drag: true,
            loadText: '模板上传中，请稍等',
            span: 24,
            propsHttp: {
              res: 'data',
            },
            // 传递参数
            data: this.basicImportSearch,
            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>