url 2 pdf support, update test run, reduse imge size,

test-run/docx-template.ts

@@ -1,9 +1,9 @@
 
-// npx ts-node docx-templates.ts
+// npx ts-node docx-template.ts
 import * as readline from 'node:readline/promises';  // This uses the promise-based APIs
 import { stdin as input, stdout as output } from 'node:process';
 import { docxTemplateX} from '../libs/docx-templates-lib';
-import {templateData} from '../libs/report-template'
+import {templateOption} from '../libs/report-template'
 import fs from 'fs';
 (async ()=>{
     const rl = readline.createInterface({ input, output });
@@ -12,10 +12,11 @@ import fs from 'fs';
     const dpath = await rl.question('JSON data path(./docx.json): ');
     const datapath = dpath?dpath:"./docx.json"
     const data_raw = fs.readFileSync(datapath);
-    const tdata:templateData = JSON.parse(data_raw.toString());
-    const bpath = await rl.question('Base path of templates-docx(..): ');
-    const basepath = bpath?bpath:".."
-    let buffer = await docxTemplateX(basepath,tdata,ext)
-    fs.writeFileSync(tdata.reportName+"."+ext, buffer);
+    const tdata:templateOption = JSON.parse(data_raw.toString());
+    const bpath = await rl.question('templates path(../templates/docx): ');
+    const basepath = bpath?bpath:"../templates/docx"
+    //const template = await fs.promises.readFile(`${basepath}/${tdata.template}.docx`)
+    let buffer = await docxTemplateX(`${basepath}/${tdata.template}.docx`, tdata,ext)
+    fs.writeFileSync(".output/"+tdata.reportName+"."+ext, buffer);
     rl.close();    
 })()

test-run/grafana_pdf.js

@@ -0,0 +1,267 @@
+'use strict';
+
+const puppeteer = require('puppeteer');
+//const fetch = require('node-fetch');
+const fs = require('fs');
+
+console.log("Script grafana_pdf.js started...");
+
+/*
+const url = process.argv[2];
+const auth_string = process.argv[3];
+let outfile = process.argv[4];
+*/
+const url = 'https://bma-dashboard.frappet.synology.me/d/5EwyjelSk/1408ef66-0081-5b3f-aa00-5e70aa9bdbf1?orgId=1&kiosk=true'
+const auth_string = 'admin:xxx';
+let outfile = "./url_gf.pdf";
+
+const width_px = parseInt(process.env.PDF_WIDTH_PX, 10) || 1200;
+console.log("PDF width set to:", width_px);
+
+const auth_header = 'Basic ' + Buffer.from(auth_string).toString('base64');
+
+(async () => {
+    try {
+        console.log("URL provided:", url);
+        console.log("Checking URL accessibility...");
+        const response = await fetch(url, {
+            method: 'GET',
+            headers: {'Authorization': auth_header}
+        });
+
+        if (!response.ok) {
+            throw new Error(`Unable to access URL. HTTP status: ${response.status}`);
+        }
+
+        const contentType = response.headers.get('content-type');
+        if (!contentType || !contentType.includes('text/html')) {
+            throw new Error("The URL provided is not a valid Grafana instance.");
+        }
+
+        let finalUrl = url;
+        if(process.env.FORCE_KIOSK_MODE === 'true') {
+            console.log("Checking if kiosk mode is enabled.")
+            if (!finalUrl.includes('&kiosk')) {
+                console.log("Kiosk mode not enabled. Enabling it.")
+                finalUrl += '&kiosk=true';
+            }
+            console.log("Kiosk mode enabled.")
+        }
+
+
+        console.log("Starting browser...");
+        const browser = await puppeteer.launch({
+            executablePath: process.env.PUPPETEER_EXECUTABLE_PATH,
+            headless: true,
+            // args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-gpu']
+        });
+
+        const page = await browser.newPage();
+        console.log("Browser started...");
+
+/*
+        await page.setExtraHTTPHeaders({'Authorization': auth_header});
+        await page.setDefaultNavigationTimeout(process.env.PUPPETEER_NAVIGATION_TIMEOUT || 120000);
+
+        await page.setViewport({
+            width: width_px,
+            height: 800,
+            deviceScaleFactor: 2,
+            isMobile: false
+        });
+*/
+        console.log("Navigating to URL...");
+        await page.goto(finalUrl, {waitUntil: 'networkidle0'});
+        console.log("Page loaded...");
+/*
+        await page.evaluate(() => {
+            let infoCorners = document.getElementsByClassName('panel-info-corner');
+            for (let el of infoCorners) {
+                el.hidden = true;
+            }
+            let resizeHandles = document.getElementsByClassName('react-resizable-handle');
+            for (let el of resizeHandles) {
+                el.hidden = true;
+            }
+        });
+*/
+        let dashboardName = 'output_grafana';
+        let date = new Date().toISOString().split('T')[0];
+        let addRandomStr = false;
+/*
+        if (process.env.EXTRACT_DATE_AND_DASHBOARD_NAME_FROM_HTML_PANEL_ELEMENTS === 'true') {
+            console.log("Extracting dashboard name and date from the HTML page...");
+            let scrapedDashboardName = await page.evaluate(() => {
+                const dashboardElement = document.getElementById('display_actual_dashboard_title');
+                return dashboardElement ? dashboardElement.innerText.trim() : null;
+            });
+
+            let scrapedDate = await page.evaluate(() => {
+                const dateElement = document.getElementById('display_actual_date');
+                return dateElement ? dateElement.innerText.trim() : null;
+            });
+
+            let scrapedPanelName = await page.evaluate(() => {
+                const scrapedPanelName = document.querySelectorAll('h6');
+                if (scrapedPanelName.length > 1) { // Multiple panels detected
+                    console.log("Multiple panels detected. Unable to fetch a unique panel name. Using default value.")
+                    return null;
+                }
+                if (scrapedPanelName[0] && scrapedPanelName[0].innerText.trim() === '') {
+                    console.log("Empty panel name detected. Using default value.")
+                    return null;
+                }
+                return scrapedPanelName[0] ? scrapedPanelName[0].innerText.trim() : null;
+            });
+
+            if (scrapedPanelName && !scrapedDashboardName) {
+                console.log("Panel name fetched:", scrapedPanelName);
+                dashboardName = scrapedPanelName;
+                addRandomStr = false;
+            } else if (!scrapedDashboardName) {
+                console.log("Dashboard name not found. Using default value.");
+                addRandomStr = true;
+            } else {
+                console.log("Dashboard name fetched:", scrapedDashboardName);
+                dashboardName = scrapedDashboardName;
+            }
+
+            if (scrapedPanelName && !scrapedDate) {
+                const urlParts = new URL(url);
+                const from = urlParts.searchParams.get('from');
+                const to = urlParts.searchParams.get('to');
+                if (from && to) {
+                    const fromDate = isNaN(from) ? from.replace(/[^\w\s-]/g, '_') : new Date(parseInt(from)).toISOString().split('T')[0];
+                    const toDate = isNaN(to) ? to.replace(/[^\w\s-]/g, '_') : new Date(parseInt(to)).toISOString().split('T')[0];
+                    date = `${fromDate}_to_${toDate}`;
+                } else {
+                    // using date in URL
+                    date = new Date().toISOString().split('T')[0];
+                }
+            } else if (!scrapedDate) {
+                console.log("Date not found. Using default value.");
+            } else {
+                console.log("Date fetched:", date);
+                date = scrapedDate;
+            }
+        } else {
+        console.log("Extracting dashboard name and date from the URL...");
+            const urlParts = new URL(url);
+            const pathSegments = urlParts.pathname.split('/');
+            dashboardName = pathSegments[pathSegments.length - 1] || dashboardName;
+            const from = urlParts.searchParams.get('from');
+            const to = urlParts.searchParams.get('to');
+            if (from && to) {
+                const fromDate = isNaN(from) ? from.replace(/[^\w\s-]/g, '_') : new Date(parseInt(from)).toISOString().split('T')[0];
+                const toDate = isNaN(to) ? to.replace(/[^\w\s-]/g, '_') : new Date(parseInt(to)).toISOString().split('T')[0];
+                date = `${fromDate}_to_${toDate}`;
+            } else {
+                date = new Date().toISOString().split('T')[0];
+            }
+            console.log("Dashboard name fetched from URL:", dashboardName);
+            console.log("Trying to fetch the panel name from the page...")
+            let scrapedPanelName = await page.evaluate(() => {
+                const scrapedPanelName = document.querySelectorAll('h6');
+                console.log(scrapedPanelName)
+                if (scrapedPanelName.length > 1) { // Multiple panels detected
+                    console.log("Multiple panels detected. Unable to fetch a unique panel name. Using default value.")
+                    return null;
+                }
+                if (scrapedPanelName[0] && scrapedPanelName[0].innerText.trim() === '') {
+                    console.log("Empty panel name detected. Using default value.")
+                    return null;
+                }
+                return scrapedPanelName[0] ? scrapedPanelName[0].innerText.trim() : null;
+            });
+
+            if (scrapedPanelName) {
+                console.log("Panel name fetched:", scrapedPanelName);
+                dashboardName = scrapedPanelName;
+                addRandomStr = false;
+            }
+
+            console.log("Date fetched from URL:", date);
+        }
+
+        //outfile = `./${dashboardName.replace(/\s+/g, '_')}_${date.replace(/\s+/g, '_')}${addRandomStr ? '_' + Math.random().toString(36).substring(7) : ''}.pdf`;
+
+        const loginPageDetected = await page.evaluate(() => {
+            const resetPasswordButton = document.querySelector('a[href*="reset-email"]');
+            return !!resetPasswordButton;
+        })
+
+        if (loginPageDetected) {
+            throw new Error("Login page detected. Check your credentials.");
+        }
+
+        if(process.env.DEBUG_MODE === 'true') {
+            const documentHTML = await page.evaluate(() => {
+                return document.querySelector("*").outerHTML;
+            });
+            if (!fs.existsSync('./debug')) {
+                fs.mkdirSync('./debug');
+            }
+            const filename = `./debug/debug_${dashboardName.replace(/\s+/g, '_')}_${date.replace(/\s+/g, '_')}${'_' + Math.random().toString(36).substring(7)}.html`;
+            fs.writeFileSync(filename, documentHTML);
+            console.log("Debug HTML file saved at:", filename);
+
+        }
+*/
+        const totalHeight = await page.evaluate(() => {
+            const scrollableSection = document.querySelector('.scrollbar-view');
+            return scrollableSection ? scrollableSection.firstElementChild.scrollHeight : null;
+        });
+
+        if (!totalHeight) {
+            throw new Error("Unable to determine the page height. The selector '.scrollbar-view' might be incorrect or missing.");
+        } else {
+            console.log("Page height adjusted to:", totalHeight);
+        }
+
+        let x = await page.evaluate(async () => {
+            const scrollableSection = document.querySelector('.scrollbar-view');
+            if (scrollableSection) {
+                const childElement = scrollableSection.firstElementChild;
+                let scrollPosition = 0;
+                let viewportHeight = window.innerHeight;
+
+                while (scrollPosition < childElement.scrollHeight) {
+                    scrollableSection.scrollBy(0, viewportHeight);
+                    await new Promise(resolve => setTimeout(resolve, 500));
+                    scrollPosition += viewportHeight;
+                }
+                return scrollPosition
+            }
+            return 0
+        });
+        console.log("scrollPosition="+x)
+
+        await page.setViewport({
+            width: width_px,
+            height: totalHeight,
+            deviceScaleFactor: 2,
+            isMobile: false
+        });
+
+        console.log("Generating PDF...");
+        await page.pdf({
+            path: outfile,
+            width: width_px + 'px',
+            height: totalHeight + 'px',
+            printBackground: true,
+            scale: 1,
+            displayHeaderFooter: false,
+            margin: {top: 0, right: 0, bottom: 0, left: 0}
+        });
+        console.log(`PDF generated: ${outfile}`);
+
+        await browser.close();
+        console.log("Browser closed.");
+
+        //process.send({ success: true, path: outfile });
+    } catch (error) {
+        console.error("Error during PDF generation:", error.message);
+        //process.send({ success: false, error: error.message });
+        process.exit(1);
+    }
+})();

test-run/html-template.ts

@@ -0,0 +1,25 @@
+// npx ts-node html-templates.ts
+import * as readline from 'node:readline/promises';  // This uses the promise-based APIs
+import { stdin as input, stdout as output } from 'node:process';
+import { htmlTemplateX} from '../libs/html-templates-lib';
+import {templateOption} from '../libs/report-template'
+import fs from 'fs';
+(async ()=>{
+    const rl = readline.createInterface({ input, output });
+    const e = await rl.question('Output extension(pdf,png,jpeg): ');
+    const ext =e?e:"pdf"
+    const dpath = await rl.question('JSON data path(./html.json): ');
+    const datapath = dpath?dpath:"./html.json"
+    const data_raw = fs.readFileSync(datapath);
+    const tdata:templateOption = JSON.parse(data_raw.toString());
+    const bpath = await rl.question('templates path(../templates/html): ');
+    const basepath = bpath?bpath:"../templates/html"
+//    const template = await fs.promises.readFile(`${basepath}/${tdata.template}.docx`)
+    let url = "https://bma-dashboard.frappet.synology.me/d/ANtkJay4z/4Lic4Li54LmJ4Lie4Li04LiB4Liy4Lij?orgId=1&kiosk"
+    //let url = "https://pantip.com"
+    // let url = "https://google.com"
+
+    let buffer = await htmlTemplateX(url, tdata,ext)
+    fs.writeFileSync(".output/"+tdata.reportName+"."+ext, buffer);
+    rl.close();    
+})()

test-run/html.json

@@ -0,0 +1,7 @@
+{
+  "template": "hello_html",
+  "reportName": "report-html",
+  "htmlOption": {
+    "querySelector": ".scrollbar-view"
+  }
+}

test-run/url_play2pdf.ts

@@ -0,0 +1,80 @@
+/*
+// // ใช้เพื่อทดสอบ Plwywright
+import {chromium} from 'playwright'
+
+(async () => {
+  //const targetUrl = "https://bma-dashboard.frappet.synology.me/d/5EwyjelSk/1408ef66-0081-5b3f-aa00-5e70aa9bdbf1?orgId=1&kiosk=true"
+  //const targetUrl = "https://bma-dashboard.frappet.synology.me/d/OLZwQhPVz/4Liq4Lit4Lia4LmB4LiC4LmI4LiH4LiC4Lix4LiZ?orgId=1&kiosk"
+  const targetUrl = "https://blognone.com"
+
+  const width_px = Number(process.env.PDF_WIDTH_PX) || 800;
+  const browser = await chromium.launch()
+  const page = await browser.newPage()
+  await page.setViewportSize({ width: width_px, height: 800 });
+  await page.goto(targetUrl, { waitUntil: 'networkidle' })
+ 
+  console.log("document.body.scrollHeight "+ await await page.evaluate(() => document.body.scrollHeight) )
+  let x = await page.evaluate(async () => {
+    const scrollableSection = document.querySelector('.scrollbar-view');
+    if (scrollableSection) {
+      const childElement = scrollableSection.firstElementChild;
+      let scrollPosition = 0;
+      let viewportHeight = window.innerHeight;
+      if (childElement)
+        while (scrollPosition < childElement.scrollHeight) {
+          scrollableSection.scrollBy(0, viewportHeight);
+          await new Promise(resolve => setTimeout(resolve, 500));
+          scrollPosition += viewportHeight;
+        }
+      return scrollPosition
+    }
+    return 0
+  });
+  console.log("scrollPosition=" + x)
+
+  const totalHeight = await page.evaluate(() => {
+    const scrollableSection = document.querySelector('.scrollbar-view');
+    if(scrollableSection&&scrollableSection.firstElementChild){
+      return scrollableSection.firstElementChild.scrollHeight
+    }
+    return  document.body.scrollHeight 
+  });
+  console.log("totalHeight="+totalHeight)
+  if (!totalHeight) {
+    throw new Error("Unable to determine the page height. The selector '.scrollbar-view' might be incorrect or missing.");
+  } else {
+    console.log("Page height adjusted to:", totalHeight);
+  }
+
+
+  console.log("set viewport ")
+  await page.setViewportSize({
+    width: width_px,
+    height: totalHeight,
+  });
+
+
+  page.emulateMedia({ media: 'print' })
+
+  await page.screenshot({
+    path: 'url_play.png',
+    fullPage: true,
+    //quality: 100,
+    // type:"png"
+  });
+  await page.pdf({
+    path: '.output/url_play.pdf',
+    width: width_px + 'px',
+    height: totalHeight + 'px',
+    printBackground: true,
+    // format: 'A4',
+    displayHeaderFooter: true,
+    // headerTemplate: '<span style="font-size:10px;">SaaS Report Header</span>',
+    // footerTemplate: '<span style="font-size:10px;">Page <span class="pageNumber"></span> of <span class="totalPages"></span></span>',
+    margin: { top: '20px', bottom: '20px', right: '10px', left: '10px' }
+  });
+
+
+  await browser.close()
+})();
+*/

test-run/url_pup2pdf.ts

@@ -0,0 +1,84 @@
+// ใช้เพื่อทดสอบ puppeteer
+import puppeteer from 'puppeteer'
+(async () => {
+  //const targetUrl = "https://bma-dashboard.frappet.synology.me/d/5EwyjelSk/1408ef66-0081-5b3f-aa00-5e70aa9bdbf1?orgId=1&kiosk=true"
+  //const targetUrl = "https://bma-dashboard.frappet.synology.me/d/OLZwQhPVz/4Liq4Lit4Lia4LmB4LiC4LmI4LiH4LiC4Lix4LiZ?orgId=1&kiosk"
+  const targetUrl = "https://blognone.com"
+  const width_px = Number(process.env.PDF_WIDTH_PX) || 1200;
+
+  const browser = await puppeteer.launch({
+    // executablePath: '/usr/bin/chromium',
+    headless: true,
+    //args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-gpu']
+  });
+
+  const page = await browser.newPage();
+  page.setDefaultNavigationTimeout(120000);
+  
+  await page.setViewport({
+    width: width_px,
+    height: 800,
+    deviceScaleFactor: 2,
+    isMobile: false
+  });
+  
+  await page.goto(targetUrl, { waitUntil: 'networkidle0' });
+  //console.log("Page loaded...");
+  let x = await page.evaluate(async () => {
+    const scrollableSection = 
+      document.querySelector('.scrollbar-view')?document.querySelector('.scrollbar-view'):document.body
+    if (scrollableSection) {
+      const childElement = scrollableSection.firstElementChild;
+      let scrollPosition = 0;
+      let viewportHeight = window.innerHeight;
+      if (childElement)
+        while (scrollPosition < childElement.scrollHeight) {
+          scrollableSection.scrollBy(0, viewportHeight);
+          await new Promise(resolve => setTimeout(resolve, 500));
+          scrollPosition += viewportHeight;
+        }
+      return scrollPosition
+    }
+    return 0
+  });
+  console.log("scrollPosition=" + x)
+
+  const totalHeight = await page.evaluate(() => {
+    const scrollableSection = document.querySelector('.scrollbar-view');//only Grafana ?
+    return scrollableSection ? scrollableSection.firstElementChild?.scrollHeight : document.body.scrollHeight;
+  });
+
+  if (!totalHeight) {
+    throw new Error("Unable to determine the page height. The selector '.scrollbar-view' might be incorrect or missing.");
+  } else {
+    console.log("Page height adjusted to:", totalHeight);
+  }
+
+  console.log("set viewport ")
+  await page.setViewport({
+    width: width_px,
+    height: totalHeight,
+    deviceScaleFactor: 2,
+    isMobile: false
+  });
+
+  await page.screenshot({
+    path: 'url_pup.png',
+    fullPage: true,
+    type: 'png' // | 'jpeg' | 'webp'
+  })
+  await page.pdf({
+    path: ".outputurl_prop.pdf",
+    // format:"A4",
+    width: width_px,
+    height: totalHeight,
+    printBackground: true,
+    scale: 1,
+    displayHeaderFooter: false,
+    margin: { top: 0, right: 0, bottom: 0, left: 0 }
+  });
+  await browser.close();
+  
+})();
+
+

test-run/xlsx-template.ts

@@ -3,7 +3,7 @@
 import * as readline from 'node:readline/promises';  // This uses the promise-based APIs
 import { stdin as input, stdout as output } from 'node:process';
 import {xlsxTemplateX} from '../libs/xlsx-template-lib'
-import {templateData} from '../libs/report-template'
+import {templateOption} from '../libs/report-template'
 import fs from 'fs';
 (async ()=>{
     const rl = readline.createInterface({ input, output });
@@ -12,10 +12,11 @@ import fs from 'fs';
     const dpath = await rl.question('JSON data path(./xlsx.json): ');
     const datapath = dpath?dpath:"./xlsx.json"
     const data_raw = fs.readFileSync(datapath);
-    const tdata:templateData = JSON.parse(data_raw.toString());
-    const bpath = await rl.question('Base path of templates-docx(..): ');
-    const basepath = bpath?bpath:".."
-    let buffer = await xlsxTemplateX(basepath,tdata,ext)
+    const tdata:templateOption = JSON.parse(data_raw.toString());
+    const bpath = await rl.question('template path(../templates/xlsx): ');
+    const basepath = bpath?bpath:"../templates/xlsx"
+    // const template = await fs.promises.readFile(`${basepath}/${tdata.template}.xlsx`)
+    let buffer = await xlsxTemplateX(`${basepath}/${tdata.template}.xlsx`,tdata,ext)
     fs.writeFileSync(tdata.reportName+"."+ext, buffer);
     rl.close();    
 })()