导出excel总提示格式不匹配和日志大数据导出示例

jeecgboot-vue3/src/hooks/system/useMethods.ts

@@ -22,12 +22,23 @@ export function useMethods() {
    */
   async function exportXls(name, url, params, isXlsx = false) {
     //update-begin---author:wangshuai---date:2024-01-25---for:【QQYUN-8118】导出超时时间设置长点---
-    const data = await defHttp.get({ url: url, params: params, responseType: 'blob', timeout: 60000 }, { isTransformResponse: false });
+    // 修改为返回原生 response，便于获取 headers
+    const response = await defHttp.get(
+      { url: url, params: params, responseType: 'blob', timeout: 60000 },
+      { isTransformResponse: false, isReturnNativeResponse: true }
+    );
     //update-end---author:wangshuai---date:2024-01-25---for:【QQYUN-8118】导出超时时间设置长点---
-    if (!data) {
+    if (!response || !response.data) {
       createMessage.warning('文件下载失败');
       return;
     }
+    // 判断 header 中 content-disposition 是否包含 .xlsx
+    let isXlsxByHeader = isXlsx;
+    const disposition = response.headers && response.headers['content-disposition'];
+    if (disposition && disposition.indexOf('.xlsx') !== -1) {
+      isXlsxByHeader = true;
+    }
+    const data = response.data;
     //update-begin---author:wangshuai---date:2024-04-18---for: 导出excel失败提示，不进行导出---
     let reader = new FileReader()
     reader.readAsText(data, 'utf-8')
@@ -40,16 +51,16 @@ export function useMethods() {
             if (!success) {
               createMessage.warning('导出失败，失败原因：' + message);
             } else {
-              exportExcel(name, isXlsx, data);
+              exportExcel(name, isXlsxByHeader, data);
             }
             return;
           } catch (error) {
-            exportExcel(name, isXlsx, data);
+            exportExcel(name, isXlsxByHeader, data);
           }
           // update-end---author:liaozhiyang---date:2025-02-11---for:【issues/7738】文件中带"success"导出报错 ---
         }
       }
-      exportExcel(name, isXlsx, data);
+      exportExcel(name, isXlsxByHeader, data);
       //update-end---author:wangshuai---date:2024-04-18---for: 导出excel失败提示，不进行导出---
     }
   }

jeecgboot-vue3/src/views/monitor/log/index.vue

@@ -1,11 +1,19 @@
 <template>
   <BasicTable :ellipsis="true" @register="registerTable" :searchInfo="searchInfo" :columns="logColumns" :expand-column-width="16">
     <template #tableTitle>
+      <div class="table-title-bar">
         <a-tabs defaultActiveKey="4" @change="tabChange" size="small">
           <a-tab-pane tab="异常日志" key="4"></a-tab-pane>
           <a-tab-pane tab="登录日志" key="1"></a-tab-pane>
           <a-tab-pane tab="操作日志" key="2"></a-tab-pane>
         </a-tabs>
+        <span class="export-btn" v-if="searchInfo.logType == 2">
+          <a-tooltip>
+            <template #title>导出</template>
+            <a-button  type="text" preIcon="ant-design:download-outlined" shape="circle" @click="onExportXls" />
+          </a-tooltip>
+        </span>
+      </div>
     </template>
     <template #expandedRowRender="{ record }">
       <div v-if="searchInfo.logType == 2">
@@ -30,7 +38,7 @@
 <script lang="ts" name="monitor-log" setup>
   import { ref } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { getLogList } from './log.api';
+  import { getLogList, getExportUrl } from './log.api';
   import {
     columns,
     searchFormSchema,
@@ -47,7 +55,7 @@
   const searchSchema = ref<any>(searchFormSchema);
   const searchInfo = { logType: '4' };
   // 列表页面公共参数、方法
-  const { prefixCls, tableContext } = useListPage({
+  const { prefixCls, tableContext, onExportXls } = useListPage({
     designScope: 'user-list',
     tableProps: {
       title: '日志列表',
@@ -62,6 +70,11 @@
         fieldMapToTime: [['fieldTime', ['createTime_begin', 'createTime_end'], 'YYYY-MM-DD']],
       },
     },
+    exportConfig: {
+      name:"操作日志",
+      url: getExportUrl,
+      params: searchInfo,
+    },
   });
 
   const [registerTable, { reload }] = tableContext;
@@ -95,4 +108,16 @@
   .error-box {
     white-space: break-spaces;
   }
+  .table-title-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+  .export-btn {
+    margin-left: auto;
+  }
+  :deep(.jeecg-basic-table-header__toolbar){
+    width:100px !important;
+  }
 </style>

jeecgboot-vue3/src/views/monitor/log/log.api.ts

@@ -2,6 +2,7 @@ import { defHttp } from '/@/utils/http/axios';
 
 enum Api {
   list = '/sys/log/list',
+  exportXls = '/sys/log/exportXls',
 }
 
 /**
@@ -11,3 +12,10 @@ enum Api {
 export const getLogList = (params) => {
   return defHttp.get({ url: Api.list, params });
 };
+
+
+/**
+ * 导出api
+ * @param params
+ */
+export const getExportUrl = Api.exportXls;