Update puppeteer_pdf.js

puppeteer_pdf.js

@@ -25,8 +25,23 @@ async function convertToPDF() {
     let browser;
     try {
         console.log('Starting PDF conversion...');
+        console.log(`HTML File: ${htmlFilePath}`);
         console.log(`Aspect Ratio: ${aspectRatio}`);
         
+        // Get absolute paths
+        const absoluteHtmlPath = path.resolve(htmlFilePath);
+        const htmlDir = path.dirname(absoluteHtmlPath);
+        console.log(`HTML Directory: ${htmlDir}`);
+        
+        // Read HTML content
+        let htmlContent = fs.readFileSync(absoluteHtmlPath, 'utf8');
+        
+        // List image files in the directory
+        const imageFiles = fs.readdirSync(htmlDir).filter(file => 
+            /\.(jpg|jpeg|png|gif|svg|webp|bmp)$/i.test(file)
+        );
+        console.log(`Found ${imageFiles.length} image file(s) in directory:`, imageFiles);
+        
         // Launch browser with system Chromium
         const browserOptions = {
             headless: 'new',
@@ -91,43 +106,60 @@ async function convertToPDF() {
         
         console.log(`Viewport set to: ${viewportWidth}x${viewportHeight}`);
         
-        // Load the HTML file
-        const absoluteHtmlPath = path.resolve(htmlFilePath);
-        const htmlContent = fs.readFileSync(absoluteHtmlPath, 'utf8');
-        
-        // Set base URL for relative paths
-        const baseUrl = 'file://' + path.dirname(absoluteHtmlPath) + '/';
+        // Construct file:// URL for the HTML directory
+        const baseUrl = 'file://' + htmlDir + '/';
+        console.log(`Base URL: ${baseUrl}`);
         
+        // Load HTML content with file:// protocol
         console.log('Loading HTML content...');
-        await page.setContent(htmlContent, {
+        await page.goto(baseUrl + path.basename(absoluteHtmlPath), {
             waitUntil: ['networkidle0', 'domcontentloaded'],
             timeout: 30000
         });
-        
-        // Inject base tag for relative paths
-        await page.evaluate((baseUrl) => {
-            const base = document.createElement('base');
-            base.href = baseUrl;
-            document.head.appendChild(base);
-        }, baseUrl);
 
         // Wait for all images and fonts to load
         console.log('Waiting for images and fonts...');
         await page.evaluate(async () => {
             const selectors = Array.from(document.querySelectorAll("img"));
+            console.log('Found', selectors.length, 'img tags');
+            
             await Promise.all([
                 document.fonts.ready,
                 ...selectors.map((img) => {
+                    console.log('Image src:', img.src, 'Complete:', img.complete);
                     if (img.complete) return Promise.resolve();
                     return new Promise((resolve) => {
-                        img.addEventListener("load", resolve);
-                        img.addEventListener("error", resolve);
-                        setTimeout(resolve, 5000);
+                        img.addEventListener("load", () => {
+                            console.log('Loaded:', img.src);
+                            resolve();
+                        });
+                        img.addEventListener("error", () => {
+                            console.log('Error loading:', img.src);
+                            resolve();
+                        });
+                        setTimeout(() => {
+                            console.log('Timeout:', img.src);
+                            resolve();
+                        }, 5000);
                     });
                 }),
             ]);
         });
         
+        // Check which images loaded successfully
+        const imageStatus = await page.evaluate(() => {
+            const images = Array.from(document.querySelectorAll('img'));
+            return images.map(img => ({
+                src: img.src,
+                complete: img.complete,
+                naturalWidth: img.naturalWidth,
+                naturalHeight: img.naturalHeight,
+                width: img.width,
+                height: img.height
+            }));
+        });
+        console.log('Image loading status:', JSON.stringify(imageStatus, null, 2));
+        
         // Count pages for logging
         const pageCount = await page.evaluate(() => {
             const pages = document.querySelectorAll('.page, .slide, section.page, article.page');
@@ -149,7 +181,7 @@ async function convertToPDF() {
         let pdfOptions = {
             path: pdfPath,
             printBackground: true,
-            preferCSSPageSize: true,  // CRITICAL: Respect CSS @page rules
+            preferCSSPageSize: true,
             margin: { 
                 top: '0mm', 
                 right: '0mm', 
@@ -157,7 +189,7 @@ async function convertToPDF() {
                 left: '0mm' 
             },
             displayHeaderFooter: false,
-            scale: 1.0  // No scaling to preserve exact dimensions
+            scale: 1.0
         };
 
         // Set dimensions based on aspect ratio