vue3 axios导出 tar.gz圧缩包

<el-button class="submitconfirm" type="danger" @click="exportSubmitHandle" >导出</el-button>

 

 

<script lang="ts" setup>

  import { Document, Menu as IconMenu, Location, Setting } from "@element-plus/icons-vue";

 

  import useView from "@/hooks/useView";

  import { IFunction, IObject } from "@/types/interface";

  import { defineComponent, computed,onMounted, reactive, ref, toRefs, watch,onBeforeUnmount } from "vue";

  import { ElMessage, ElMessageBox } from "element-plus";

  import baseService from "@/service/baseService";

  import type { TabsPaneContext } from 'element-plus'

import logo from "@/assets/images/logo.png";

import { EMitt, ESidebarLayoutEnum, EThemeSetting } from "@/constants/enum";

import emits from "@/utils/emits";

import { getThemeConfigCacheByKey } from "@/utils/theme";

import { useAppStore } from "@/store";

import Logo from "./logo.vue";

// import "@/assets/css/header.less";

// ---------------------------------------------

// -------------------------------------------------

import { mapState, mapActions } from 'vuex';

import { useStore } from 'vuex';

// ---------------------------------------------------

// ---------------------------------------------------------------------------

import Expand from "../layout/header/expand.vue";

import Innerfloor from "./innerfloor.vue";

// ---------------------------------------------

import app from "@/constants/app";

import axiosrequest from '@/service/axiosrequest';

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';

// ------------------------------------------------------------------------------

   const myhostname = ref("");

onMounted(()=>{

  myhostname.value = sessionStorage.getItem("myhostname") as string;

 

});

 

const requestExportParam = reactive({

    conf:"debug",

    action: "export_logs"

});

const exportSubmitHandle = () => {

      axios.post(myhostname.value + '/action', JSON.stringify(requestExportParam), {

      headers: {

        'Content-Type': 'multipart/form-data'

      },

      responseType: 'blob' // 设置响应类型为Blob，以接收文件流

    })

    .then((response) => {

      // 创建一个Blob URL

      const blobUrl = window.URL.createObjectURL(new Blob([response.data]));

      // 创建一个链接元素

      const downloadLink = document.createElement('a');

      downloadLink.href = blobUrl;

      downloadLink.download = 'archive.tar.gz'; // 设置下载文件名

      // 触发下载

      document.body.appendChild(downloadLink);

      downloadLink.click();

      document.body.removeChild(downloadLink);

    })

    .catch((error) => {

      console.error('Error downloading the tar archive:', error);

    });

};

</script>