Spaces:

CatPtain
/

web_ppt

Running

App Files Files Community

CatPtain commited on Jun 14

Commit

d58052f

verified ·

1 Parent(s): cf5bd9a

Upload public.js

Browse files

Files changed (1) hide show

backend/src/routes/public.js +299 -122

backend/src/routes/public.js CHANGED Viewed

@@ -19,11 +19,34 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
   const slide = pptData.slides[slideIndex];
   const theme = pptData.theme || {};
-  // 优化的PPT尺寸计算函数 - 确保长宽比一致性
   const calculatePptDimensions = (slide) => {
     if (!slide.elements || slide.elements.length === 0) {
-      // 如果没有元素，使用标准PPT 16:9 比例
-      return { width: 1280, height: 720 };
     }
     let maxRight = 0;
@@ -31,13 +54,13 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
     let minLeft = Infinity;
     let minTop = Infinity;
     slide.elements.forEach(element => {
       const left = element.left || 0;
       const top = element.top || 0;
       const width = element.width || 0;
       const height = element.height || 0;
-      // 计算元素的边界
       const elementRight = left + width;
       const elementBottom = top + height;
@@ -47,34 +70,28 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
       minTop = Math.min(minTop, top);
     });
-    // 确保有最小边距
-    const padding = 40;
-    const contentWidth = maxRight - Math.max(0, minLeft);
-    const contentHeight = maxBottom - Math.max(0, minTop);
-    // 计算最终尺寸，保持合理的长宽比
-    let finalWidth = Math.max(contentWidth + padding * 2, 800);
-    let finalHeight = Math.max(contentHeight + padding * 2, 600);
-    // 确保长宽比合理（介于4:3到16:9之间）
-    const aspectRatio = finalWidth / finalHeight;
-    const minRatio = 4/3; // 1.33
-    const maxRatio = 16/9; // 1.78
-    if (aspectRatio < minRatio) {
-      // 太高了，调整宽度
-      finalWidth = finalHeight * minRatio;
-    } else if (aspectRatio > maxRatio) {
-      // 太宽了，调整高度
-      finalHeight = finalWidth / maxRatio;
-    }
-    const result = {
-      width: Math.round(finalWidth),
-      height: Math.round(finalHeight)
-    };
-    console.log(`PPT dimensions calculated: ${result.width}x${result.height} (aspect ratio: ${(result.width/result.height).toFixed(2)})`);
     return result;
   };
@@ -138,165 +155,325 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
     <html lang="zh-CN">
     <head>
         <meta charset="UTF-8">
-        <meta name="viewport" content="width=${pptDimensions.width}, height=${pptDimensions.height}, initial-scale=1.0, user-scalable=no">
         <title>${title} - 第${slideIndex + 1}页</title>
         <style>
             * {
                 margin: 0 !important;
                 padding: 0 !important;
                 box-sizing: border-box !important;
             }
             html {
-                width: 100vw !important;
-                height: 100vh !important;
                 overflow: hidden !important;
-                background-color: #000 !important;
             }
             body {
-                width: 100vw !important;
-                height: 100vh !important;
                 overflow: hidden !important;
                 font-family: 'Microsoft YaHei', Arial, sans-serif !important;
-                background-color: #000 !important;
-                display: flex !important;
-                align-items: center !important;
-                justify-content: center !important;
             }
             .slide-container {
                 width: ${pptDimensions.width}px !important;
                 height: ${pptDimensions.height}px !important;
                 background-color: ${slide.background?.color || theme.backgroundColor || '#ffffff'} !important;
-                position: relative !important;
                 overflow: hidden !important;
-                box-shadow: 0 0 20px rgba(255,255,255,0.1) !important;
-                transform-origin: center center !important;
             }
             ${slide.background?.type === 'image' ? `
             .slide-container::before {
                 content: '';
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                background-image: url('${slide.background.image}');
-                background-size: ${slide.background.imageSize || 'cover'};
-                background-position: center;
-                background-repeat: no-repeat;
-                z-index: 0;
             }
             ` : ''}
-            /* 隐藏滚动条 */
-            ::-webkit-scrollbar {
-                display: none;
             }
-            /* 截图模式样式 */
-            .screenshot-mode {
-                background-color: transparent !important;
             }
-            .screenshot-mode body {
-                background-color: transparent !important;
-                width: ${pptDimensions.width}px !important;
-                height: ${pptDimensions.height}px !important;
-                display: block !important;
             }
-            .screenshot-mode .slide-container {
-                position: absolute !important;
-                top: 0 !important;
-                left: 0 !important;
-                transform: none !important;
-                box-shadow: none !important;
             }
         </style>
         <script>
-            // 将PPT尺寸信息传递给JavaScript，用于截图服务
             window.PPT_DIMENSIONS = {
                 width: ${pptDimensions.width},
                 height: ${pptDimensions.height}
             };
-            // 截图模式标识
-            window.SCREENSHOT_MODE = window.location.search.includes('screenshot=true');
         </script>
     </head>
-    <body${slide.background?.type === 'image' && slide.background?.image ? '' : ''}>
         <div class="slide-container" id="slideContainer">
             ${renderElements(slide.elements)}
         </div>
         <script>
-            console.log('PPT页面加载完成');
-            console.log('PPT尺寸:', window.PPT_DIMENSIONS);
-            console.log('截图模式:', window.SCREENSHOT_MODE);
-            // 根据模式应用不同的样式和行为
-            if (window.SCREENSHOT_MODE) {
-                // 截图模式：固定尺寸，无缩放
-                document.documentElement.classList.add('screenshot-mode');
-                document.body.style.cssText = \`
-                    width: ${pptDimensions.width}px !important;
-                    height: ${pptDimensions.height}px !important;
-                    background: transparent !important;
-                    overflow: hidden !important;
-                    margin: 0 !important;
-                    padding: 0 !important;
-                    display: block !important;
-                \`;
                 const container = document.getElementById('slideContainer');
                 if (container) {
                     container.style.cssText = \`
-                        width: ${pptDimensions.width}px !important;
-                        height: ${pptDimensions.height}px !important;
-                        position: absolute !important;
                         top: 0 !important;
                         left: 0 !important;
                         transform: none !important;
                         box-shadow: none !important;
-                        background-color: ${slide.background?.color || theme.backgroundColor || '#ffffff'} !important;
                     \`;
                 }
-                console.log('截图模式样式已应用');
-            } else {
-                // 网页浏览模式：响应式缩放，保持长宽比
-                function resizeSlide() {
-                    const container = document.getElementById('slideContainer');
-                    const slideWidth = window.PPT_DIMENSIONS.width;
-                    const slideHeight = window.PPT_DIMENSIONS.height;
-                    // 窗口尺寸
-                    const windowWidth = window.innerWidth;
-                    const windowHeight = window.innerHeight;
-                    // 计算缩放比例，保持宽高比
-                    const scaleX = (windowWidth - 40) / slideWidth; // 留20px边距
-                    const scaleY = (windowHeight - 40) / slideHeight;
-                    const scale = Math.min(scaleX, scaleY, 1); // 最大不超过1倍
-                    // 应用缩放
-                    container.style.transform = \`scale(\${scale})\`;
-                    console.log(\`响应式缩放应用: \${scale.toFixed(3)}x (窗口: \${windowWidth}x\${windowHeight}, PPT: \${slideWidth}x\${slideHeight})\`);
-                }
-                // 页面加载时调整大小
-                window.addEventListener('load', resizeSlide);
-                // 窗口大小改变时重新调整
-                window.addEventListener('resize', resizeSlide);
-                // 立即执行一次
-                resizeSlide();
-            }
         </script>
     </body>
     </html>

   const slide = pptData.slides[slideIndex];
   const theme = pptData.theme || {};
+  // 精确计算PPT内容的真实尺寸 - 优先使用预设尺寸，然后基于元素计算
   const calculatePptDimensions = (slide) => {
+    // 1. 优先使用PPT数据中的预设尺寸
+    if (pptData.slideSize && pptData.slideSize.width && pptData.slideSize.height) {
+      const result = {
+        width: Math.ceil(pptData.slideSize.width),
+        height: Math.ceil(pptData.slideSize.height)
+      };
+      console.log(`使用PPT预设尺寸: ${result.width}x${result.height}`);
+      return result;
+    }
+    // 2. 使用slide级别的尺寸设置
+    if (slide.width && slide.height) {
+      const result = {
+        width: Math.ceil(slide.width),
+        height: Math.ceil(slide.height)
+      };
+      console.log(`使用slide尺寸: ${result.width}x${result.height}`);
+      return result;
+    }
+    // 3. 根据元素分布计算合适的尺寸
     if (!slide.elements || slide.elements.length === 0) {
+      // 如果没有元素，使用标准PPT尺寸
+      const result = { width: 960, height: 720 }; // 4:3标准比例
+      console.log(`使用默认尺寸: ${result.width}x${result.height}`);
+      return result;
     }
     let maxRight = 0;
     let minLeft = Infinity;
     let minTop = Infinity;
+    // 计算所有元素的实际边界
     slide.elements.forEach(element => {
       const left = element.left || 0;
       const top = element.top || 0;
       const width = element.width || 0;
       const height = element.height || 0;
       const elementRight = left + width;
       const elementBottom = top + height;
       minTop = Math.min(minTop, top);
     });
+    // 重置无限值
+    if (minLeft === Infinity) minLeft = 0;
+    if (minTop === Infinity) minTop = 0;
+    // 计算内容区域的实际尺寸
+    const contentWidth = maxRight - minLeft;
+    const contentHeight = maxBottom - minTop;
+    // 添加适当的边距，确保内容不被裁切
+    const paddingX = Math.max(40, Math.abs(minLeft));
+    const paddingY = Math.max(40, Math.abs(minTop));
+    // 计算最终的PPT尺寸
+    let finalWidth = Math.max(contentWidth + paddingX * 2, 800);
+    let finalHeight = Math.max(contentHeight + paddingY * 2, 600);
+    // 确保尺寸为偶数（避免半像素问题）
+    finalWidth = Math.ceil(finalWidth / 2) * 2;
+    finalHeight = Math.ceil(finalHeight / 2) * 2;
+    const result = { width: finalWidth, height: finalHeight };
+    console.log(`根据元素计算尺寸: ${result.width}x${result.height}`);
     return result;
   };
     <html lang="zh-CN">
     <head>
         <meta charset="UTF-8">
+        <meta name="viewport" content="width=${pptDimensions.width}, height=${pptDimensions.height}, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">
         <title>${title} - 第${slideIndex + 1}页</title>
         <style>
+            /* 全局重置 - 完全消除所有边距和填充 */
             * {
                 margin: 0 !important;
                 padding: 0 !important;
                 box-sizing: border-box !important;
+                border: none !important;
+                outline: none !important;
             }
+            /* HTML根元素 - 严格设置为PPT精确尺寸 */
             html {
+                width: ${pptDimensions.width}px !important;
+                height: ${pptDimensions.height}px !important;
+                min-width: ${pptDimensions.width}px !important;
+                min-height: ${pptDimensions.height}px !important;
+                max-width: ${pptDimensions.width}px !important;
+                max-height: ${pptDimensions.height}px !important;
                 overflow: hidden !important;
+                background: ${slide.background?.color || theme.backgroundColor || '#ffffff'} !important;
+                position: fixed !important;
+                top: 0 !important;
+                left: 0 !important;
+                margin: 0 !important;
+                padding: 0 !important;
+                border: none !important;
+                outline: none !important;
             }
+            /* Body元素 - 严格设置为PPT精确尺寸 */
             body {
+                width: ${pptDimensions.width}px !important;
+                height: ${pptDimensions.height}px !important;
+                min-width: ${pptDimensions.width}px !important;
+                min-height: ${pptDimensions.height}px !important;
+                max-width: ${pptDimensions.width}px !important;
+                max-height: ${pptDimensions.height}px !important;
                 overflow: hidden !important;
                 font-family: 'Microsoft YaHei', Arial, sans-serif !important;
+                background: ${slide.background?.color || theme.backgroundColor || '#ffffff'} !important;
+                position: fixed !important;
+                top: 0 !important;
+                left: 0 !important;
+                margin: 0 !important;
+                padding: 0 !important;
+                border: none !important;
+                outline: none !important;
             }
+            /* PPT容器 - 严格设置为PPT精确尺寸，完全填充 */
             .slide-container {
                 width: ${pptDimensions.width}px !important;
                 height: ${pptDimensions.height}px !important;
+                min-width: ${pptDimensions.width}px !important;
+                min-height: ${pptDimensions.height}px !important;
+                max-width: ${pptDimensions.width}px !important;
+                max-height: ${pptDimensions.height}px !important;
                 background-color: ${slide.background?.color || theme.backgroundColor || '#ffffff'} !important;
+                position: fixed !important;
+                top: 0 !important;
+                left: 0 !important;
                 overflow: hidden !important;
+                transform: none !important;
+                transform-origin: top left !important;
+                margin: 0 !important;
+                padding: 0 !important;
+                border: none !important;
+                outline: none !important;
+                z-index: 1 !important;
             }
+            /* 背景图片处理 */
             ${slide.background?.type === 'image' ? `
             .slide-container::before {
                 content: '';
+                position: absolute !important;
+                top: 0 !important;
+                left: 0 !important;
+                width: ${pptDimensions.width}px !important;
+                height: ${pptDimensions.height}px !important;
+                background-image: url('${slide.background.image}') !important;
+                background-size: ${slide.background.imageSize || 'cover'} !important;
+                background-position: center !important;
+                background-repeat: no-repeat !important;
+                z-index: 0 !important;
             }
             ` : ''}
+            /* 隐藏所有滚动条 */
+            html::-webkit-scrollbar,
+            body::-webkit-scrollbar,
+            *::-webkit-scrollbar {
+                display: none !important;
+                width: 0 !important;
+                height: 0 !important;
             }
+            /* Firefox滚动条隐藏 */
+            html {
+                scrollbar-width: none !important;
             }
+            /* 禁用文本选择和拖拽 */
+            * {
+                -webkit-user-select: none !important;
+                -moz-user-select: none !important;
+                -ms-user-select: none !important;
+                user-select: none !important;
+                -webkit-user-drag: none !important;
+                -khtml-user-drag: none !important;
+                -moz-user-drag: none !important;
+                -o-user-drag: none !important;
+                user-drag: none !important;
             }
+            /* 禁用所有可能的缩放和调整 */
+            body {
+                zoom: 1 !important;
+                -webkit-text-size-adjust: 100% !important;
+                -ms-text-size-adjust: 100% !important;
             }
         </style>
         <script>
+            // PPT尺寸信息 - 用于截图服务和JavaScript处理
             window.PPT_DIMENSIONS = {
                 width: ${pptDimensions.width},
                 height: ${pptDimensions.height}
             };
+            // 强制设置viewport尺寸
+            const viewportMeta = document.querySelector('meta[name="viewport"]');
+            if (viewportMeta) {
+                viewportMeta.setAttribute('content', \`width=\${window.PPT_DIMENSIONS.width}, height=\${window.PPT_DIMENSIONS.height}, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover\`);
+            }
+            console.log('PPT页面初始化 - 固定尺寸模式:', {
+                dimensions: window.PPT_DIMENSIONS,
+                userAgent: navigator.userAgent
+            });
         </script>
     </head>
+    <body>
         <div class="slide-container" id="slideContainer">
             ${renderElements(slide.elements)}
         </div>
         <script>
+            // 页面加载完成后的初始化 - 确保完全精确的尺寸
+            window.addEventListener('load', function() {
                 const container = document.getElementById('slideContainer');
+                const html = document.documentElement;
+                const body = document.body;
+                // 强制设置精确尺寸
+                const exactWidth = ${pptDimensions.width};
+                const exactHeight = ${pptDimensions.height};
+                const backgroundColor = '${slide.background?.color || theme.backgroundColor || '#ffffff'}';
+                console.log('强制设置页面精确尺寸:', exactWidth + 'x' + exactHeight);
+                // 应用固定尺寸样式 - 完全消除白边
+                const applyExactSize = (element, width, height) => {
+                    if (!element) return;
+                    element.style.cssText = \`
+                        width: \${width}px !important;
+                        height: \${height}px !important;
+                        min-width: \${width}px !important;
+                        min-height: \${height}px !important;
+                        max-width: \${width}px !important;
+                        max-height: \${height}px !important;
+                        overflow: hidden !important;
+                        margin: 0 !important;
+                        padding: 0 !important;
+                        border: none !important;
+                        outline: none !important;
+                        position: fixed !important;
+                        top: 0 !important;
+                        left: 0 !important;
+                        transform: none !important;
+                        transform-origin: top left !important;
+                        background: \${backgroundColor} !important;
+                        box-sizing: border-box !important;
+                    \`;
+                };
+                // 设置HTML和Body元素
+                applyExactSize(html, exactWidth, exactHeight);
+                applyExactSize(body, exactWidth, exactHeight);
+                // 设置容器元素
                 if (container) {
                     container.style.cssText = \`
+                        width: \${exactWidth}px !important;
+                        height: \${exactHeight}px !important;
+                        min-width: \${exactWidth}px !important;
+                        min-height: \${exactHeight}px !important;
+                        max-width: \${exactWidth}px !important;
+                        max-height: \${exactHeight}px !important;
+                        position: fixed !important;
                         top: 0 !important;
                         left: 0 !important;
+                        overflow: hidden !important;
+                        margin: 0 !important;
+                        padding: 0 !important;
+                        border: none !important;
+                        outline: none !important;
                         transform: none !important;
                         box-shadow: none !important;
+                        z-index: 1 !important;
+                        background-color: \${backgroundColor} !important;
                     \`;
                 }
+                // 禁用所有可能的缩放和调整
+                document.addEventListener('wheel', function(e) {
+                    if (e.ctrlKey) {
+                        e.preventDefault();
+                    }
+                }, { passive: false });
+                // 禁用触摸缩放
+                document.addEventListener('touchstart', function(e) {
+                    if (e.touches.length > 1) {
+                        e.preventDefault();
+                    }
+                }, { passive: false });
+                // 禁用双击缩放
+                let lastTouchEnd = 0;
+                document.addEventListener('touchend', function(e) {
+                    const now = new Date().getTime();
+                    if (now - lastTouchEnd <= 300) {
+                        e.preventDefault();
+                    }
+                    lastTouchEnd = now;
+                }, false);
+                // 禁用右键菜单
+                document.addEventListener('contextmenu', function(e) {
+                    e.preventDefault();
+                }, false);
+                // 禁用F11全屏
+                document.addEventListener('keydown', function(e) {
+                    if (e.key === 'F11') {
+                        e.preventDefault();
+                    }
+                }, false);
+                console.log('固定尺寸模式样式应用完成，精确尺寸:', exactWidth + 'x' + exactHeight);
+                // 最终验证尺寸 - 确保网页分辨率与PPT分辨率完全一致
+                setTimeout(() => {
+                    const actualDimensions = {
+                        html: {
+                            width: html.offsetWidth,
+                            height: html.offsetHeight,
+                            clientWidth: html.clientWidth,
+                            clientHeight: html.clientHeight
+                        },
+                        body: {
+                            width: body.offsetWidth,
+                            height: body.offsetHeight,
+                            clientWidth: body.clientWidth,
+                            clientHeight: body.clientHeight
+                        },
+                        container: {
+                            width: container ? container.offsetWidth : 0,
+                            height: container ? container.offsetHeight : 0,
+                            clientWidth: container ? container.clientWidth : 0,
+                            clientHeight: container ? container.clientHeight : 0
+                        },
+                        viewport: {
+                            width: window.innerWidth,
+                            height: window.innerHeight
+                        }
+                    };
+                    console.log('最终页面尺寸验证:', actualDimensions);
+                    console.log('PPT目标尺寸:', window.PPT_DIMENSIONS);
+                    // 检查是否存在尺寸不一致的情况
+                    const htmlSizeMatch = actualDimensions.html.width === window.PPT_DIMENSIONS.width &&
+                                         actualDimensions.html.height === window.PPT_DIMENSIONS.height;
+                    const bodySizeMatch = actualDimensions.body.width === window.PPT_DIMENSIONS.width &&
+                                         actualDimensions.body.height === window.PPT_DIMENSIONS.height;
+                    const containerSizeMatch = container ?
+                        (actualDimensions.container.width === window.PPT_DIMENSIONS.width &&
+                         actualDimensions.container.height === window.PPT_DIMENSIONS.height) : true;
+                    if (!htmlSizeMatch || !bodySizeMatch || !containerSizeMatch) {
+                        console.warn('检测到尺寸不一致，可能出现白边问题');
+                        console.warn('HTML尺寸匹配:', htmlSizeMatch);
+                        console.warn('Body尺寸匹配:', bodySizeMatch);
+                        console.warn('容器尺寸匹配:', containerSizeMatch);
+                        // 尝试强制修正
+                        if (!htmlSizeMatch) {
+                            html.style.width = window.PPT_DIMENSIONS.width + 'px';
+                            html.style.height = window.PPT_DIMENSIONS.height + 'px';
+                        }
+                        if (!bodySizeMatch) {
+                            body.style.width = window.PPT_DIMENSIONS.width + 'px';
+                            body.style.height = window.PPT_DIMENSIONS.height + 'px';
+                        }
+                        if (container && !containerSizeMatch) {
+                            container.style.width = window.PPT_DIMENSIONS.width + 'px';
+                            container.style.height = window.PPT_DIMENSIONS.height + 'px';
+                        }
+                        console.log('已尝试强制修正尺寸不一致问题');
+                    } else {
+                        console.log('✅ 页面尺寸验证通过，网页分辨率与PPT分辨率完全一致，无白边');
+                    }
+                }, 100);
+            });
         </script>
     </body>
     </html>