airoptweb/src/views/titlecomponent/Exreport.vue

<template>
  <el-form label-position="left">
    <!-- <span>导出格式</span> -->
    <el-form-item label="导出格式" :label-width="formLabelWidth">
    </el-form-item>
    <el-radio-group v-model="exformat">
      <el-radio label="2">doc</el-radio>
      <el-radio label="1">pdf</el-radio>
      <el-radio label="3">HTML</el-radio>
      <el-radio label="4">image</el-radio>
    </el-radio-group>
    <!-- <div style="text-align: center;width: 100%;">
      <el-transfer 
      v-model="selectedvalue" 
      :data="tranlist"
      class="custom_transfer"
      />
    </div> -->
    <!-- <el-form-item label="选择文件：" :label-width="formLabelWidth">
      <el-row style="width: 100%">
        <el-col :span="24">
          <el-input    
            readonly
          />
        </el-col>
        <el-col :span="1" style="display: flex; align-items: center; margin-left: -35px">
          <fileUploads
            :projectId="123" 
            solverType="exampleSolver" 
            accept="" 
            upId="uniqueId1" 
            name="点击选择文件"
            :imgSrc="meshFileImgSrc"  
          />
        </el-col>
      </el-row>
    </el-form-item>
    <div>
      <el-checkbox-group>
        <el-checkbox label="表1" value="表1"/>
        <el-checkbox label="表1" value="表1"/>
        <el-checkbox label="表1" value="表1"/>
        <el-checkbox label="表1" value="表1"/>
      </el-checkbox-group>
    </div>
    <el-form-item label="选择名称：" :label-width="formLabelWidth">
      <el-row>
        <el-col span="20">
          <el-input></el-input>
        </el-col>
        <el-col span="4">
          <el-button>打开</el-button>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item label="文件类型：" :label-width="formLabelWidth">
      <el-select v-model="selflietype">
        <el-option 
        v-for = "item in flietypelist" 
        :key="item.value" 
        :label="item.label" 
        :value="item.value" 
        />
      </el-select>
    </el-form-item> -->
  </el-form>
</template>

<script setup>
import { ref, onMounted, reactive, provide, nextTick } from "vue"
import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus"
import { Edit, CaretBottom } from "@element-plus/icons-vue"
import { requestblobfile, uploadFile } from "@/utils/request"

import fileUploads from "../components/fileuploads.vue";
const meshFileImgSrc = new URL("@/assets/img/open.png", import.meta.url).href;

let formLabelWidth = ref(90)

let pid = ref()
let exformat = ref('2')

let selectedvalue = ref([])
let selflietype = ref('Adobe PDF(*.pdf)')

let tranlist = ref([
  { key: '1', label: '表1' },
  { key: '2', label: '表1' },
  { key: '3', label: '表1' },
  { key: '4', label: '表1' },
])

let flietypelist = ref([
  { label:"Adobe PDF(*.pdf)", value:"pdf" },
  { label:"Word 97-2003 Document(*.doc)", value:"doc" },
  { label:"HTML(*.html)", value:"html" },
  { label:"All Image Files(*.png,*.jpg,*.jpeg,*.gif)", value:"img" },
])

const exportreport = (id) => {
  pid.value = id;
  const params = {
    transCode: "MDO0082",
    pid: pid.value,
    type: exformat.value
  };

  requestblobfile(params)
    .then(res => {
      // 1. 获取服务器返回的文件名（从 Content-Disposition）
      const contentDisposition = res.headers['content-disposition'];
      let fileName = `报告_${pid.value}.docx`; // 默认文件名（如果解析失败）

      if (contentDisposition) {
        const fileNameMatch = contentDisposition.match(/filename=(.+)/i);
        if (fileNameMatch && fileNameMatch[1]) {
          fileName = fileNameMatch[1].trim(); // 提取服务器返回的文件名
        }
      }

      // 2. 获取正确的 MIME 类型（从 Content-Type）
      const contentType = res.headers['content-type'] || 'application/octet-stream';

      // 3. 创建 Blob 并下载
      const blob = new Blob([res.data], { type: contentType });
      const link = document.createElement('a');
      const blobUrl = URL.createObjectURL(blob);
      link.href = blobUrl;
      link.download = fileName; // 使用服务器返回的文件名
      document.body.appendChild(link);
      link.click();

      // 清理资源
      URL.revokeObjectURL(blobUrl);
      document.body.removeChild(link);
    })
    .catch(err => {
      ElMessage.error('导出报告失败');
      console.error('导出错误:', err);
    });
};

defineExpose({
  exportreport
})
</script>