Upload useExport.ts

frontend/src/hooks/useExport.ts

@@ -1156,12 +1156,20 @@ export default () => {
               continue;
             }
             
-            // 检查元素尺寸
+            // 检查元素尺寸 - 使用更智能的检查逻辑
             const dimensions = getElementDimensions(targetElement);
             console.log(`Target element dimensions for ${el.id}:`, dimensions);
             
-            if (dimensions.width <= 0 || dimensions.height <= 0) {
-              console.warn(`Invalid element dimensions for shape ${el.id}:`, dimensions);
+            // 更宽松的尺寸检查：只要有任何一种尺寸测量方法返回有效值就继续
+            const hasValidDimensions = (
+              dimensions.width > 0 || dimensions.height > 0 ||
+              dimensions.clientWidth > 0 || dimensions.clientHeight > 0 ||
+              dimensions.offsetWidth > 0 || dimensions.offsetHeight > 0 ||
+              dimensions.boundingRect.width > 0 || dimensions.boundingRect.height > 0
+            );
+            
+            if (!hasValidDimensions) {
+              console.warn(`No valid dimensions found for shape ${el.id}:`, dimensions);
               console.log('Falling back to path-based export');
               // 降级处理代码...
               const scale = {
@@ -1204,52 +1212,111 @@ export default () => {
               continue;
             }
             
-            // 使用Canvas渲染
+            // 使用多重策略渲染矢量图形
             let base64Image;
+            let renderSuccess = false;
+            
+            // 策略1: 优先使用SVG序列化（对矢量图形更可靠）
             try {
-              console.log(`Starting Canvas rendering for ${el.id}`);
-              
-              // Canvas渲染选项
-              const renderOptions = {
-                scale: 2, // 高分辨率渲染
-                backgroundColor: null, // 透明背景
-                useCORS: true,
-                timeout: 10000, // 10秒超时
-                format: 'png' as const,
-                quality: 0.95
-              };
+              console.log(`Attempting SVG serialization for ${el.id}`);
               
-              base64Image = await renderElementToBase64(targetElement, renderOptions);
-              
-              console.log(`Canvas rendering result for ${el.id}:`, {
-                success: !!base64Image,
-                length: base64Image ? base64Image.length : 0,
-                preview: base64Image ? base64Image.substring(0, 100) + '...' : 'null'
-              });
-              
-              if (!base64Image || base64Image.length < 100) {
-                throw new Error('Canvas rendering returned empty or invalid result');
+              const svgElement = targetElement.tagName.toLowerCase() === 'svg' 
+                ? targetElement 
+                : targetElement.querySelector('svg');
+                
+              if (svgElement) {
+                // 确保SVG元素已完全渲染
+                await new Promise(resolve => {
+                  requestAnimationFrame(() => {
+                    requestAnimationFrame(resolve);
+                  });
+                });
+                
+                base64Image = svg2Base64(svgElement);
+                
+                console.log(`SVG serialization result for ${el.id}:`, {
+                  success: !!base64Image,
+                  length: base64Image ? base64Image.length : 0,
+                  preview: base64Image ? base64Image.substring(0, 100) + '...' : 'null'
+                });
+                
+                if (base64Image && base64Image.length > 100) {
+                  renderSuccess = true;
+                  console.log(`SVG serialization successful for ${el.id}`);
+                }
               }
-            } catch (error) {
-              console.error(`Canvas rendering failed for shape ${el.id}:`, error);
-              
-              // 尝试SVG序列化作为备选方案
-              console.log(`Attempting SVG serialization fallback for ${el.id}`);
+            } catch (svgError) {
+              console.warn(`SVG serialization failed for ${el.id}:`, svgError);
+            }
+            
+            // 策略2: 如果SVG序列化失败，使用Canvas渲染
+            if (!renderSuccess) {
+              try {
+                console.log(`Attempting Canvas rendering for ${el.id}`);
+                
+                // Canvas渲染选项
+                const renderOptions = {
+                  scale: 2, // 高分辨率渲染
+                  backgroundColor: null, // 透明背景
+                  useCORS: true,
+                  timeout: 15000, // 增加超时时间
+                  format: 'png' as const,
+                  quality: 0.95
+                };
+                
+                base64Image = await renderElementToBase64(targetElement, renderOptions);
+                
+                console.log(`Canvas rendering result for ${el.id}:`, {
+                  success: !!base64Image,
+                  length: base64Image ? base64Image.length : 0,
+                  preview: base64Image ? base64Image.substring(0, 100) + '...' : 'null'
+                });
+                
+                if (base64Image && base64Image.length > 100) {
+                  renderSuccess = true;
+                  console.log(`Canvas rendering successful for ${el.id}`);
+                }
+              } catch (canvasError) {
+                console.error(`Canvas rendering failed for ${el.id}:`, canvasError);
+              }
+            }
+            
+            // 策略3: 如果前两种方法都失败，尝试简化的SVG渲染
+            if (!renderSuccess) {
               try {
+                console.log(`Attempting simplified SVG rendering for ${el.id}`);
+                
                 const svgElement = targetElement.tagName.toLowerCase() === 'svg' 
                   ? targetElement 
                   : targetElement.querySelector('svg');
                   
                 if (svgElement) {
-                  base64Image = svg2Base64(svgElement);
-                  console.log(`SVG fallback successful for ${el.id}`);
-                } else {
-                  throw new Error('No SVG element found for fallback');
+                  // 创建简化的SVG副本
+                  const simplifiedSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+                  const rect = svgElement.getBoundingClientRect();
+                  
+                  simplifiedSVG.setAttribute('width', (rect.width || 100).toString());
+                  simplifiedSVG.setAttribute('height', (rect.height || 100).toString());
+                  simplifiedSVG.setAttribute('viewBox', `0 0 ${rect.width || 100} ${rect.height || 100}`);
+                  simplifiedSVG.innerHTML = svgElement.innerHTML;
+                  
+                  base64Image = svg2Base64(simplifiedSVG);
+                  
+                  if (base64Image && base64Image.length > 100) {
+                    renderSuccess = true;
+                    console.log(`Simplified SVG rendering successful for ${el.id}`);
+                  }
                 }
-              } catch (svgError) {
-                console.error(`SVG fallback also failed for ${el.id}:`, svgError);
-                // 最终降级到路径导出
-                console.log(`Final fallback to path-based export for ${el.id}`);
+              } catch (simplifiedError) {
+                console.error(`Simplified SVG rendering failed for ${el.id}:`, simplifiedError);
+              }
+            }
+            
+            // 如果所有渲染策略都失败，使用路径导出作为最后备选
+            if (!renderSuccess) {
+              console.warn(`All rendering strategies failed for ${el.id}, falling back to path export`);
+              // 最终降级到路径导出
+              console.log(`Final fallback to path-based export for ${el.id}`);
                 const scale = {
                   x: el.width / el.viewBox[0],
                   y: el.height / el.viewBox[1],
@@ -1288,7 +1355,6 @@ export default () => {
                 
                 pptxSlide.addShape('custGeom' as pptxgen.ShapeType, fallbackOptions);
                 continue;
-              }
             }
 
             // 添加渲染后的图像到幻灯片