Upload useExport.ts

frontend/src/hooks/useExport.ts

@@ -818,9 +818,32 @@ export default () => {
     return isSVGBase64 || isSVGUrl
   }
 
+  // 确保元素已渲染的辅助函数
+  const ensureElementsRendered = async () => {
+    return new Promise<void>((resolve) => {
+      // 强制重绘
+      document.body.offsetHeight;
+      
+      // 等待下一个动画帧
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          resolve();
+        });
+      });
+    });
+  };
+
   // 导出PPTX文件
-  const exportPPTX = (_slides: Slide[], masterOverwrite: boolean, ignoreMedia: boolean) => {
+  const exportPPTX = async (_slides: Slide[], masterOverwrite: boolean, ignoreMedia: boolean) => {
     exporting.value = true
+
+    try {
+      // 确保所有元素已渲染
+      await ensureElementsRendered();
+    } catch (error) {
+      console.warn('Failed to ensure elements rendered:', error);
+    }
+
     const pptx = new pptxgen()
 
     if (viewportRatio.value === 0.625) pptx.layout = 'LAYOUT_16x10'
@@ -974,8 +997,87 @@ export default () => {
         else if (el.type === 'shape') {
           if (el.special) {
             const svgRef = document.querySelector(`.thumbnail-list .base-element-${el.id} svg`) as HTMLElement
-            if (svgRef.clientWidth < 1 || svgRef.clientHeight < 1) continue // 临时处理（导入PPTX文件带来的异常数据）
-            const base64SVG = svg2Base64(svgRef)
+            
+            // 改进的尺寸检查逻辑
+            if (!svgRef) {
+              console.warn(`SVG element not found for shape ${el.id}`);
+              continue;
+            }
+            
+            // 获取多种尺寸信息进行判断
+            const clientWidth = svgRef.clientWidth;
+            const clientHeight = svgRef.clientHeight;
+            const boundingRect = svgRef.getBoundingClientRect();
+            const computedStyle = window.getComputedStyle(svgRef);
+            
+            // 更智能的尺寸判断
+            const hasValidSize = (
+              (clientWidth > 0 && clientHeight > 0) ||
+              (boundingRect.width > 0 && boundingRect.height > 0) ||
+              (parseFloat(computedStyle.width) > 0 && parseFloat(computedStyle.height) > 0)
+            );
+            
+            if (!hasValidSize) {
+              console.warn(`Invalid SVG dimensions for shape ${el.id}:`, {
+                clientWidth,
+                clientHeight,
+                boundingRect: { width: boundingRect.width, height: boundingRect.height },
+                computedStyle: { width: computedStyle.width, height: computedStyle.height }
+              });
+              
+              // 降级到普通形状处理
+              console.info(`Falling back to path-based export for shape ${el.id}`);
+              const scale = {
+                x: el.width / el.viewBox[0],
+                y: el.height / el.viewBox[1],
+              };
+              const points = formatPoints(toPoints(el.path), scale);
+              
+              let fillColor = formatColor(el.fill);
+              if (el.gradient) {
+                const colors = el.gradient.colors;
+                const color1 = colors[0].color;
+                const color2 = colors[colors.length - 1].color;
+                const color = tinycolor.mix(color1, color2).toHexString();
+                fillColor = formatColor(color);
+              }
+              if (el.pattern) fillColor = formatColor('#00000000');
+              const opacity = el.opacity === undefined ? 1 : el.opacity;
+              
+              const fallbackOptions: pptxgen.ShapeProps = {
+                x: el.left / ratioPx2Inch.value,
+                y: el.top / ratioPx2Inch.value,
+                w: el.width / ratioPx2Inch.value,
+                h: el.height / ratioPx2Inch.value,
+                fill: { color: fillColor.color, transparency: (1 - fillColor.alpha * opacity) * 100 },
+                points,
+              };
+              
+              if (el.flipH) fallbackOptions.flipH = el.flipH;
+              if (el.flipV) fallbackOptions.flipV = el.flipV;
+              if (el.shadow) fallbackOptions.shadow = getShadowOption(el.shadow);
+              if (el.outline?.width) fallbackOptions.line = getOutlineOption(el.outline);
+              if (el.rotate) fallbackOptions.rotate = el.rotate;
+              if (el.link) {
+                const linkOption = getLinkOption(el.link);
+                if (linkOption) fallbackOptions.hyperlink = linkOption;
+              }
+              
+              pptxSlide.addShape('custGeom' as pptxgen.ShapeType, fallbackOptions);
+              continue;
+            }
+            
+            // SVG序列化with错误处理
+            let base64SVG;
+            try {
+              base64SVG = svg2Base64(svgRef);
+              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);
+              continue;
+            }
 
             const options: pptxgen.ImageProps = {
               data: base64SVG,