Upload useExport.ts

frontend/src/hooks/useExport.ts

@@ -996,14 +996,58 @@ export default () => {
 
         else if (el.type === 'shape') {
           if (el.special) {
-            const svgRef = document.querySelector(`.thumbnail-list .base-element-${el.id} svg`) as HTMLElement
+            // 调试：记录元素信息
+            console.log(`Processing special shape ${el.id}:`, {
+              type: el.type,
+              special: el.special,
+              width: el.width,
+              height: el.height,
+              left: el.left,
+              top: el.top
+            });
+            
+            // 尝试多种选择器策略
+            let svgRef = document.querySelector(`.thumbnail-list .base-element-${el.id} svg`) as HTMLElement;
+            
+            if (!svgRef) {
+              // 尝试其他可能的选择器
+              svgRef = document.querySelector(`[data-element-id="${el.id}"] svg`) as HTMLElement;
+            }
+            
+            if (!svgRef) {
+              svgRef = document.querySelector(`#element-${el.id} svg`) as HTMLElement;
+            }
+            
+            if (!svgRef) {
+              // 尝试查找所有SVG元素并匹配
+              const allSvgs = document.querySelectorAll('svg');
+              console.log(`Found ${allSvgs.length} SVG elements in document`);
+              
+              for (let i = 0; i < allSvgs.length; i++) {
+                const svg = allSvgs[i] as HTMLElement;
+                const parent = svg.closest(`[class*="${el.id}"]`);
+                if (parent) {
+                  svgRef = svg;
+                  console.log(`Found SVG for ${el.id} using parent matching`);
+                  break;
+                }
+              }
+            }
             
             // 改进的尺寸检查逻辑
             if (!svgRef) {
-              console.warn(`SVG element not found for shape ${el.id}`);
+              console.warn(`SVG element not found for shape ${el.id} after trying multiple selectors`);
+              console.log('Available elements with class containing element ID:', 
+                document.querySelectorAll(`[class*="${el.id}"]`));
               continue;
             }
             
+            console.log(`Found SVG element for ${el.id}:`, {
+              tagName: svgRef.tagName,
+              className: svgRef.className,
+              innerHTML: svgRef.innerHTML.substring(0, 200) + '...'
+            });
+            
             // 获取多种尺寸信息进行判断
             const clientWidth = svgRef.clientWidth;
             const clientHeight = svgRef.clientHeight;
@@ -1070,12 +1114,27 @@ export default () => {
             // SVG序列化with错误处理
             let base64SVG;
             try {
+              console.log(`Starting SVG serialization for ${el.id}`);
+              console.log('SVG content before serialization:', svgRef.outerHTML.substring(0, 500) + '...');
+              
               base64SVG = svg2Base64(svgRef);
+              
+              console.log(`SVG serialization result for ${el.id}:`, {
+                success: !!base64SVG,
+                length: base64SVG ? base64SVG.length : 0,
+                preview: base64SVG ? base64SVG.substring(0, 100) + '...' : 'null'
+              });
+              
               if (!base64SVG || base64SVG === 'data:image/svg+xml;base64,') {
                 throw new Error('SVG serialization returned empty result');
               }
             } catch (error) {
               console.error(`SVG serialization failed for shape ${el.id}:`, error);
+              console.log('SVG element that failed:', svgRef);
+              console.log('SVG outerHTML:', svgRef.outerHTML);
+              
+              // 尝试降级处理
+              console.log(`Attempting fallback processing for shape ${el.id}`);
               continue;
             }