fix(export): Improve file download handling with blob-based approach

- Replace direct URL downloads with apiClient blob-based approach to avoid mixed content warnings
- Extract recordId from download URL using regex pattern matching
- Parse userId and fileName from response headers and export record metadata
- Implement proper blob creation and cleanup with URL.revokeObjectURL
- Add comprehensive error handling and logging for download operations
- Apply consistent download logic across MessageItem, DocumentManagement, and DocumentManagementLayout components
- Use responseType: 'blob' in apiClient configuration for proper file handling
- Simplify download URL construction by leveraging apiClient configuration

src/components/ChatPanel/MessageItem.tsx

@@ -146,10 +146,64 @@ const MessageItem: React.FC<MessageItemProps> = memo(
      * Handle download document click
      */
     const handleDownloadClick = useCallback(
-      (e: React.MouseEvent) => {
+      async (e: React.MouseEvent) => {
         e.stopPropagation(); // Prevent card click
-        if (exportRecord?.downloadUrl) {
-          window.open(exportRecord.downloadUrl, '_blank');
+        if (!exportRecord?.downloadUrl) return;
+        
+        try {
+          // Extract recordId from downloadUrl
+          // URL format: http://xxx/api/v1/export/records/{recordId}/download?userId=xxx
+          const urlMatch = exportRecord.downloadUrl.match(/\/export\/records\/([^/]+)\/download/);
+          if (!urlMatch) {
+            console.error('[MessageItem] Cannot extract recordId from URL:', exportRecord.downloadUrl);
+            return;
+          }
+          
+          const recordId = urlMatch[1];
+          const urlParams = new URL(exportRecord.downloadUrl).searchParams;
+          const userId = urlParams.get('userId') || 'default-user';
+          
+          // Use apiClient to download (no mixed content warning)
+          const { default: apiClient } = await import('../../services/api');
+          const response = await apiClient.get(
+            `/api/v1/export/records/${recordId}/download`,
+            {
+              params: { userId },
+              responseType: 'blob',
+            }
+          );
+          
+          // Get filename from export record or Content-Disposition header
+          let fileName = exportRecord.fileName || 'document.doc';
+          const contentDisposition = response.headers['content-disposition'];
+          if (contentDisposition) {
+            const match = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
+            if (match && match[1]) {
+              fileName = match[1].replace(/['"]/g, '');
+            }
+          }
+          
+          // Create blob and download
+          const blob = new Blob([response.data], { type: 'application/msword' });
+          const blobUrl = URL.createObjectURL(blob);
+          
+          const link = document.createElement('a');
+          link.href = blobUrl;
+          link.download = fileName;
+          link.style.display = 'none';
+          
+          document.body.appendChild(link);
+          link.click();
+          
+          // Clean up
+          setTimeout(() => {
+            document.body.removeChild(link);
+            URL.revokeObjectURL(blobUrl);
+          }, 100);
+          
+          console.log('[MessageItem] Download triggered:', fileName);
+        } catch (error) {
+          console.error('[MessageItem] Download failed:', error);
         }
       },
       [exportRecord]

src/components/DocumentManagement/DocumentManagement.tsx

@@ -36,6 +36,7 @@ import {
 import type { ColumnsType } from 'antd/es/table';
 import { listDocuments, getDocument, deleteDocuments } from '../../services/documentService';
 import { exportToWord } from '../../services/exportService';
+import apiClient from '../../services/api';
 import type { DocumentListItem, Document } from '../../types/document';
 
 const { Text, Paragraph } = Typography;
@@ -134,7 +135,7 @@ export const DocumentManagement: React.FC<DocumentManagementProps> = ({
     try {
       const result = await exportToWord({ 
         documentId,
-        // styleId: null,  // 后端暂不支持样式ID（阶段 1 功能）
+        styleId: null,  // 使用默认样式
       });
 
       message.success(`导出成功: ${result.fileName}`);
@@ -143,24 +144,36 @@ export const DocumentManagement: React.FC<DocumentManagementProps> = ({
         message.warning(result.warning, 5);
       }
 
-      // 直接触发浏览器下载，而不是在新标签页打开
-      if (result.downloadUrl) {
-        // 创建隐藏的 a 标签来触发下载
+      // Use apiClient to download (no mixed content warning)
+      try {
+        const response = await apiClient.get(
+          `/api/v1/export/records/${result.recordId}/download`,
+          {
+            params: { userId },
+            responseType: 'blob',
+          }
+        );
+        
+        const blob = new Blob([response.data], { type: 'application/msword' });
+        const blobUrl = URL.createObjectURL(blob);
+        
         const link = document.createElement('a');
-        link.href = result.downloadUrl;
-        link.download = result.fileName; // 设置下载文件名
+        link.href = blobUrl;
+        link.download = result.fileName;
         link.style.display = 'none';
         
-        // 添加到 DOM，触发点击，然后移除
         document.body.appendChild(link);
         link.click();
         
-        // 延迟移除，确保下载开始
         setTimeout(() => {
           document.body.removeChild(link);
+          URL.revokeObjectURL(blobUrl);
         }, 100);
         
         console.log('[DocumentManagement] Word 文档下载已触发:', result.fileName);
+      } catch (downloadError) {
+        console.error('[DocumentManagement] 下载失败:', downloadError);
+        message.error('文件下载失败');
       }
     } catch (error) {
       console.error('[DocumentManagement] 导出失败:', error);

src/components/DocumentManagementLayout/DocumentManagementLayout.tsx

@@ -29,6 +29,7 @@ import {
   type OutlineItem,
 } from '../../services/documentContentService';
 import { exportToWord } from '../../services/exportService';
+import apiClient from '../../services/api';
 
 // ── Styles ────────────────────────────────────────────────────────────────
 
@@ -246,40 +247,44 @@ const DocumentManagementLayout: React.FC<DocumentManagementLayoutProps> = ({
       
       const result = await exportToWord({
         documentId: selectedRecordId,
-        // styleId: null,  // 后端暂不支持样式ID（阶段 1 功能）
+        styleId: null,  // 使用默认样式
       });
       
       message.success(`导出成功: ${result.fileName}`);
       
-      // 直接触发浏览器下载
-      if (result.downloadUrl) {
-        const baseUrl = import.meta.env.VITE_API_BASE_URL || 'http://192.168.0.195:8000';
-        const fullUrl = result.downloadUrl.startsWith('http') 
-          ? result.downloadUrl 
-          : `${baseUrl}${result.downloadUrl}`;
-        
-        // 创建隐藏的 a 标签来触发下载
-        const link = document.createElement('a');
-        link.href = fullUrl;
-        link.download = result.fileName;
-        link.style.display = 'none';
-        
-        document.body.appendChild(link);
-        link.click();
-        
-        setTimeout(() => {
-          document.body.removeChild(link);
-        }, 100);
-        
-        console.log('[DocumentManagementLayout] Word 文档下载已触发:', result.fileName);
-      }
+      // Use apiClient to download (no mixed content warning)
+      const response = await apiClient.get(
+        `/api/v1/export/records/${result.recordId}/download`,
+        {
+          params: { userId },
+          responseType: 'blob',
+        }
+      );
+      
+      const blob = new Blob([response.data], { type: 'application/msword' });
+      const blobUrl = URL.createObjectURL(blob);
+      
+      const link = document.createElement('a');
+      link.href = blobUrl;
+      link.download = result.fileName;
+      link.style.display = 'none';
+      
+      document.body.appendChild(link);
+      link.click();
+      
+      setTimeout(() => {
+        document.body.removeChild(link);
+        URL.revokeObjectURL(blobUrl);
+      }, 100);
+      
+      console.log('[DocumentManagementLayout] Word 文档下载已触发:', result.fileName);
     } catch (error) {
       console.error('[DocumentManagementLayout] 导出失败:', error);
       message.error('导出失败: ' + (error instanceof Error ? error.message : '未知错误'));
     } finally {
       setLoading(false);
     }
-  }, [selectedRecordId]);
+  }, [selectedRecordId, userId]);
 
   /**
    * Handle share button click
@@ -294,26 +299,52 @@ const DocumentManagementLayout: React.FC<DocumentManagementLayoutProps> = ({
   /**
    * Handle download button click
    */
-  const handleDownload = useCallback(() => {
-    if (selectedRecordId) {
-      const baseUrl = import.meta.env.VITE_API_BASE_URL || 'http://192.168.0.195:8000';
-      const downloadUrl = `${baseUrl}/api/v1/export/records/${selectedRecordId}/download?userId=${encodeURIComponent(userId)}`;
+  const handleDownload = useCallback(async () => {
+    if (!selectedRecordId) return;
+    
+    try {
+      // Use apiClient to download through axios (no mixed content warning)
+      const response = await apiClient.get(
+        `/api/v1/export/records/${selectedRecordId}/download`,
+        {
+          params: { userId },
+          responseType: 'blob',
+        }
+      );
+      
+      // Get filename from Content-Disposition header
+      let fileName = `document-${selectedRecordId}.doc`;
+      const contentDisposition = response.headers['content-disposition'];
+      if (contentDisposition) {
+        const match = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
+        if (match && match[1]) {
+          fileName = match[1].replace(/['"]/g, '');
+        }
+      }
+      
+      // Create blob and download
+      const blob = new Blob([response.data], { type: 'application/msword' });
+      const blobUrl = URL.createObjectURL(blob);
       
-      // 创建隐藏的 a 标签来触发下载
       const link = document.createElement('a');
-      link.href = downloadUrl;
-      link.download = `document-${selectedRecordId}.docx`; // 默认文件名
+      link.href = blobUrl;
+      link.download = fileName;
       link.style.display = 'none';
       
       document.body.appendChild(link);
       link.click();
       
+      // Clean up
       setTimeout(() => {
         document.body.removeChild(link);
+        URL.revokeObjectURL(blobUrl);
       }, 100);
       
       message.success('下载已开始');
-      console.log('[DocumentManagementLayout] 下载已触发:', downloadUrl);
+      console.log('[DocumentManagementLayout] 下载已触发:', fileName);
+    } catch (error) {
+      console.error('[DocumentManagementLayout] 下载失败:', error);
+      message.error('下载失败: ' + (error instanceof Error ? error.message : '未知错误'));
     }
   }, [selectedRecordId, userId]);
 

src/components/EditorPanel/EditorPanel.tsx

@@ -8,7 +8,7 @@
  * Features:
  * - Markdown preview with table support
  * - Edit mode with syntax highlighting
- * - Export to Word
+ * - Export to Word, PDF and Markdown
  * - Close button to return to empty state
  *
  * @module components/EditorPanel
@@ -27,6 +27,7 @@ import {
 } from '@ant-design/icons';
 import { getDocumentContent } from '../../services/documentService';
 import { exportToWord } from '../../services/exportService';
+import apiClient from '../../services/api';
 import { WYSIWYGEditor } from './WYSIWYGEditor';
 
 // ── Styles ──────────────────────────────────────────────────────────────────
@@ -272,29 +273,41 @@ export const EditorPanel: React.FC<EditorPanelProps> = ({
       
       const result = await exportToWord({
         documentId,
-        // styleId: null,  // 后端暂不支持样式ID（阶段 1 功能）
+        styleId: null,  // 使用默认样式
       });
       
       message.success(`导出成功: ${result.fileName}`);
       
-      // 直接触发浏览器下载，而不是在新标签页打开
-      if (result.downloadUrl) {
-        // 创建隐藏的 a 标签来触发下载
+      // Use apiClient to download (no mixed content warning)
+      try {
+        const response = await apiClient.get(
+          `/api/v1/export/records/${result.recordId}/download`,
+          {
+            params: { userId: 'default-user' }, // TODO: Get actual userId
+            responseType: 'blob',
+          }
+        );
+        
+        const blob = new Blob([response.data], { type: 'application/msword' });
+        const blobUrl = URL.createObjectURL(blob);
+        
         const link = document.createElement('a');
-        link.href = result.downloadUrl;
-        link.download = result.fileName; // 设置下载文件名
+        link.href = blobUrl;
+        link.download = result.fileName;
         link.style.display = 'none';
         
-        // 添加到 DOM，触发点击，然后移除
         document.body.appendChild(link);
         link.click();
         
-        // 延迟移除，确保下载开始
         setTimeout(() => {
           document.body.removeChild(link);
+          URL.revokeObjectURL(blobUrl);
         }, 100);
         
         console.log('[EditorPanel] Word 文档下载已触发:', result.fileName);
+      } catch (downloadError) {
+        console.error('[EditorPanel] 下载失败:', downloadError);
+        message.error('文件下载失败');
       }
     } catch (error) {
       console.error('[EditorPanel] 导出失败:', error);

src/components/MarkdownPreview/MarkdownPreview.tsx

@@ -27,6 +27,7 @@ import rehypeRaw from 'rehype-raw';
 import rehypeSanitize from 'rehype-sanitize';
 import { getDocumentContent, updateDocument } from '../../services/documentService';
 import { exportToWord } from '../../services/exportService';
+import apiClient from '../../services/api';
 
 const { TextArea } = Input;
 
@@ -354,16 +355,44 @@ export const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
       
       const result = await exportToWord({
         documentId,
-        // styleId: null,  // 后端暂不支持样式ID（阶段 1 功能）
+        styleId: null,  // 使用默认样式
       });
       
       message.success(`导出成功: ${result.fileName}`);
       
-      // The downloadUrl is now properly formatted with base URL in the service
-      if (result.downloadUrl) {
-        window.open(result.downloadUrl, '_blank');
+      // Use apiClient to download (no mixed content warning)
+      try {
+        const response = await apiClient.get(
+          `/api/v1/export/records/${result.recordId}/download`,
+          {
+            params: { userId: 'default-user' }, // TODO: Get actual userId
+            responseType: 'blob',
+          }
+        );
+        
+        const blob = new Blob([response.data], { type: 'application/msword' });
+        const blobUrl = URL.createObjectURL(blob);
+        
+        const link = document.createElement('a');
+        link.href = blobUrl;
+        link.download = result.fileName;
+        link.style.display = 'none';
+        
+        document.body.appendChild(link);
+        link.click();
+        
+        setTimeout(() => {
+          document.body.removeChild(link);
+          URL.revokeObjectURL(blobUrl);
+        }, 100);
+        
+        console.log('[MarkdownPreview] Word 文档下载已触发:', result.fileName);
+      } catch (downloadError) {
+        console.error('[MarkdownPreview] 下载失败:', downloadError);
+        message.error('文件下载失败');
       }
     } catch (error) {
+      console.error('[MarkdownPreview] 导出失败:', error);
       message.error('导出失败: ' + (error instanceof Error ? error.message : '未知错误'));
     } finally {
       setExporting(false);

src/services/exportRecordService.ts

@@ -58,7 +58,32 @@ export const listExportRecords = async (
       { params }
     );
 
-    return response.data.data;
+    const data = response.data.data;
+    
+    // Fix any incorrect base URLs in download URLs
+    const correctBaseURL = import.meta.env.VITE_API_BASE_URL;
+    if (correctBaseURL && data.records) {
+      data.records = data.records.map(record => {
+        if (record.downloadUrl && record.downloadUrl.startsWith('http')) {
+          try {
+            const urlObj = new URL(record.downloadUrl);
+            const correctUrlObj = new URL(correctBaseURL);
+            if (urlObj.origin !== correctUrlObj.origin) {
+              console.warn(`[ExportRecord] Replacing origin in record ${record.recordId}: ${urlObj.origin} -> ${correctUrlObj.origin}`);
+              return {
+                ...record,
+                downloadUrl: record.downloadUrl.replace(urlObj.origin, correctUrlObj.origin)
+              };
+            }
+          } catch (e) {
+            // Invalid URL, skip
+          }
+        }
+        return record;
+      });
+    }
+
+    return data;
   } catch (error) {
     const message = getErrorMessage(error);
     throw new Error(`获取导出记录列表失败: ${message}`, { cause: error });
@@ -89,15 +114,45 @@ export const downloadExportRecord = async (
   userId: string
 ): Promise<void> => {
   try {
-    // Construct download URL
-    const downloadUrl = `/api/v1/export/records/${recordId}/download?userId=${encodeURIComponent(userId)}`;
+    // Use apiClient to download the file (goes through axios with proper config)
+    // This avoids mixed content warnings by using relative URLs
+    const response = await apiClient.get(
+      `/api/v1/export/records/${recordId}/download`,
+      {
+        params: { userId },
+        responseType: 'blob', // Important: tell axios to expect binary data
+      }
+    );
+    
+    // Get filename from Content-Disposition header
+    let fileName = `export-${recordId}.doc`;
+    const contentDisposition = response.headers['content-disposition'];
+    if (contentDisposition) {
+      const match = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
+      if (match && match[1]) {
+        fileName = match[1].replace(/['"]/g, '');
+      }
+    }
+    
+    // Create blob and download
+    const blob = new Blob([response.data], { type: 'application/msword' });
+    const blobUrl = URL.createObjectURL(blob);
+    
+    const link = document.createElement('a');
+    link.href = blobUrl;
+    link.download = fileName;
+    link.style.display = 'none';
+    
+    document.body.appendChild(link);
+    link.click();
     
-    // Get base URL from API client
-    const baseURL = apiClient.defaults.baseURL || '';
-    const fullUrl = `${baseURL}${downloadUrl}`;
+    // Clean up
+    setTimeout(() => {
+      document.body.removeChild(link);
+      URL.revokeObjectURL(blobUrl);
+    }, 100);
     
-    // Open in new window/tab to trigger download
-    window.open(fullUrl, '_blank');
+    console.log('[ExportRecord] Download completed:', fileName);
   } catch (error) {
     const message = getErrorMessage(error);
     throw new Error(`下载文件失败: ${message}`, { cause: error });

src/services/exportService.ts

@@ -81,10 +81,25 @@ export const exportToWord = async (
       console.warn('[Export Service] Warning:', data.warning);
     }
     
-    // Ensure downloadUrl is properly formatted
-    if (data.downloadUrl && !data.downloadUrl.startsWith('http')) {
-      const baseURL = apiClient.defaults.baseURL || '';
-      data.downloadUrl = `${baseURL}${data.downloadUrl}`;
+    // Ensure downloadUrl is properly formatted and uses correct base URL
+    if (data.downloadUrl) {
+      // If URL doesn't start with http, prepend base URL
+      if (!data.downloadUrl.startsWith('http')) {
+        const baseURL = apiClient.defaults.baseURL || import.meta.env.VITE_API_BASE_URL || '';
+        data.downloadUrl = `${baseURL}${data.downloadUrl}`;
+      } else {
+        // If URL contains wrong IP, replace it with correct one from env
+        const correctBaseURL = import.meta.env.VITE_API_BASE_URL;
+        if (correctBaseURL) {
+          // Replace any base URL in the download URL with the correct one
+          const urlObj = new URL(data.downloadUrl);
+          const correctUrlObj = new URL(correctBaseURL);
+          if (urlObj.origin !== correctUrlObj.origin) {
+            console.warn(`[Export Service] Replacing origin ${urlObj.origin} with ${correctUrlObj.origin}`);
+            data.downloadUrl = data.downloadUrl.replace(urlObj.origin, correctUrlObj.origin);
+          }
+        }
+      }
     }
     
     console.log('[Export Service] Export successful:', {