fix: improve PDF image rendering - remove lazy loading, handle base64 images, add screenshot workaround

server.js

@@ -61,6 +61,15 @@ app.post('/api/generate_pdf', async (req, res) => {
     
     console.log(`[PDF-GEN] [${getElapsed()}] 解析请求完成: HTML ${htmlSizeMB} MB, 图片 ${imgCount} 张 (${imgSizeMB} MB)`);
     
+    // 关键修复：移除所有图片的 loading="lazy" 属性
+    // 问题：loading="lazy" 导致视口外的图片在 PDF 中不渲染
+    // 解决方案：https://stackoverflow.com/questions/79156691/puppeteersharp-fails-to-display-base64-encoded-images-in-pdf-output
+    const htmlWithoutLazy = html.replace(/loading=["']lazy["']/gi, '');
+    console.log(`[PDF-GEN] [${getElapsed()}] 已移除 loading="lazy" 属性`);
+    
+    // 使用移除 lazy 后的 HTML
+    const htmlToUse = htmlWithoutLazy;
+    
     const baseWaitTime = imgCount > 0 ? Math.min(500 + imgCount * 400, 6000) : 500;
     const sizeWaitTime = imgSizeMB > 0 ? Math.min(imgSizeMB * 100, 3000) : 0;
     const totalWaitTime = Math.min(baseWaitTime + sizeWaitTime, 8000);
@@ -85,7 +94,7 @@ app.post('/api/generate_pdf', async (req, res) => {
     await page.setViewport({ width: 1200, height: 800 });
     
     console.log(`[PDF-GEN] [${getElapsed()}] 正在填充页面内容...`);
-    await page.setContent(html, { 
+    await page.setContent(htmlToUse, { 
       waitUntil: ['load', 'networkidle0'],
       timeout: 120000
     });
@@ -95,39 +104,117 @@ app.post('/api/generate_pdf', async (req, res) => {
     // 等待 base64 图片完全渲染（检测实际加载状态）
     if (imgCount > 0) {
       console.log(`[PDF-GEN] [${getElapsed()}] 正在检测 ${imgCount} 张图片加载状态...`);
+      
+      // 只保留基本的打印颜色调整，不注入可能影响公式的CSS
+      await page.addStyleTag({
+        content: `body { -webkit-print-color-adjust: exact; }`
+      });
+      console.log(`[PDF-GEN] [${getElapsed()}] CSS 注入完成`);
+      
       const loadedImages = await page.evaluate(async () => {
         const images = document.querySelectorAll('img');
-        let loaded = 0;
-        let failed = 0;
-        let pending = 0;
-        await Promise.all(Array.from(images).map(img => {
-          if (img.complete && img.naturalWidth > 0) {
-            loaded++;
-            return Promise.resolve();
-          }
-          if (img.complete && img.naturalWidth === 0) {
-            failed++;
-            return Promise.resolve();
-          }
-          pending++;
-          return new Promise(resolve => {
-            img.onload = () => { loaded++; resolve(); };
-            img.onerror = () => { failed++; resolve(); };
-            setTimeout(() => { if (!img.complete) { pending--; failed++; resolve(); } }, 8000);
+        const results = [];
+        for (const img of images) {
+          const src = img.getAttribute('src') || '';
+          const srcPreview = src.substring(0, 80);
+          const isBase64 = src.startsWith('data:image/');
+          // 对于base64图片，如果src存在且是base64格式，认为已加载（headless模式下complete可能不准确）
+          const isLoaded = isBase64 && src.length > 100;
+          const status = isLoaded ? (img.naturalWidth > 0 ? 'loaded' : 'loaded-base64') : (img.complete ? (img.naturalWidth > 0 ? 'loaded' : 'error') : 'pending');
+          results.push({ src: srcPreview, status, width: img.naturalWidth, isBase64 });
+        }
+        
+        // 对于base64图片，跳过等待onload（headless模式不准确）
+        const base64Images = Array.from(images).filter(img => {
+          const src = img.getAttribute('src') || '';
+          return src.startsWith('data:image/') && src.length > 100;
+        });
+        
+        if (base64Images.length > 0) {
+          console.log(`  检测到 ${base64Images.length} 张base64图片，跳过onload等待（headless模式不准确）`);
+        } else {
+          await Promise.all(Array.from(images).map(img => {
+            if (img.complete && img.naturalWidth > 0) {
+              return Promise.resolve();
+            }
+            return new Promise(resolve => {
+              img.onload = () => { resolve(); };
+              img.onerror = () => { resolve(); };
+              setTimeout(() => { resolve(); }, 15000);
+            });
+          }));
+        }
+        
+        const finalResults = [];
+        for (const img of images) {
+          const src = img.getAttribute('src') || '';
+          const isBase64 = src.startsWith('data:image/') && src.length > 100;
+          finalResults.push({
+            src: src.substring(0, 80),
+            complete: isBase64 || img.complete,  // base64图片认为已加载
+            width: img.naturalWidth,
+            height: img.naturalHeight,
+            isBase64
           });
-        }));
-        return { total: images.length, loaded, failed, pending };
+        }
+        
+        return { 
+          initial: results,
+          final: finalResults,
+          total: images.length
+        };
+      });
+      console.log(`[PDF-GEN] [${getElapsed()}] 图片加载结果:`);
+      loadedImages.final.forEach((r, i) => {
+        const sizeInfo = r.width > 0 ? `${r.width}x${r.height}` : 'pending';
+        const statusInfo = r.complete ? (r.width > 0 ? 'OK' : 'OK(base64)') : 'NOT_COMPLETE';
+        console.log(`  Image ${i}: ${statusInfo}, ${sizeInfo}${r.isBase64 ? ' (base64)' : ''}`);
       });
-      console.log(`[PDF-GEN] [${getElapsed()}] 图片加载统计: 总共=${loadedImages.total}, 成功=${loadedImages.loaded}, 失败=${loadedImages.failed}`);
+      
+      // 只对非base64图片检查失败
+      const failedImages = loadedImages.final.filter(r => !r.isBase64 && (r.width === 0 || !r.complete));
+      if (failedImages.length > 0) {
+        console.log(`[PDF-GEN] [${getElapsed()}] ⚠️ 警告: ${failedImages.length} 张非base64图片加载失败`);
+      }
+      
+      // 尝试使用 img.decode() 强制解码验证（根据 GitHub Issue #13726 方案）
+      console.log(`[PDF-GEN] [${getElapsed()}] 尝试 img.decode() 强制解码验证...`);
+      const decodeResults = await page.evaluate(async () => {
+        const images = Array.from(document.querySelectorAll('img'));
+        const results = [];
+        
+        for (const img of images) {
+          const src = img.getAttribute('src') || '';
+          const isBase64 = src.startsWith('data:image/') && src.length > 100;
+          
+          if (isBase64 && img.naturalWidth > 0) {
+            try {
+              await img.decode();
+              results.push({ index: results.length, success: true, msg: 'decode OK' });
+            } catch (e) {
+              results.push({ index: results.length, success: false, msg: 'decode failed: ' + e.message });
+            }
+          } else {
+            results.push({ index: results.length, success: isBase64, msg: isBase64 ? 'no naturalWidth' : 'not base64' });
+          }
+        }
+        
+        return results;
+      });
+      
+      decodeResults.forEach((r, i) => {
+        console.log(`  Image ${i}: decode=${r.success ? 'OK' : 'FAIL'} (${r.msg})`);
+      });
+      
+      // 根据 GitHub Issue #10341：截图可以强制触发渲染流水线
+      console.log(`[PDF-GEN] [${getElapsed()}] 截图强制渲染（Issue #10341 workaround）...`);
+      await page.screenshot({ type: 'png' });
+      console.log(`[PDF-GEN] [${getElapsed()}] 截图完成`);
     } else {
       console.log(`[PDF-GEN] [${getElapsed()}] 无图片，等待 DOM 稳定...`);
       await delay(200);
     }
 
-    await page.addStyleTag({
-        content: `body { -webkit-print-color-adjust: exact; }`
-    });
-
     console.log(`[PDF-GEN] [${getElapsed()}] 正在生成 PDF 二进制流...`);
     const pdfBuffer = await page.pdf({
       format: 'A4',