hrms-report-template/test-run/lazy-load-puppeteer.ts

91 lines
No EOL
2.9 KiB
TypeScript

import puppeteer, { Browser, PDFOptions } from 'puppeteer'
function wait(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms));
}
export default async function capture(browser: Browser, url: string) {
// Load the specified page
const page = await browser.newPage();
// if(!page) return
await page.goto(url, { waitUntil: 'load' });
/*
//force load page
for(let i=0; i< 50;i++){
await page.evaluate(_viewportHeight => {
window.scrollBy(0, _viewportHeight);
}, 1000);
await wait(500);
}*/
//force load page and find page height
const totalHeight = await page.evaluate(async (_viewportHeight, _ms, _loop) => {
const querySelector = ".scrollbar-view"
//const querySelector = "body"
let scrollableSection = document.querySelector(querySelector) ?? window
for (let i = 0; i < _loop; i++) {
scrollableSection.scrollBy(0, _viewportHeight);
await new Promise(resolve => setTimeout(resolve, 500));
}
return document.body.scrollHeight
}, 1000, 2000, 50);
// Get the height of the rendered page
const bodyHandle = await page.$('body');
if (!bodyHandle) return
const boundingBox = await bodyHandle.boundingBox();
if (!boundingBox) return
const { height } = boundingBox;
await bodyHandle.dispose();
console.log("height", height)
// Scroll one viewport at a time, pausing to let content load
const viewportHeight = page.viewport()?.height;
if (!viewportHeight) return
let viewportIncr = 0;
/*
while (viewportIncr + viewportHeight < boundingBox.height) {
await page.evaluate(_viewportHeight => {
window.scrollBy(0, _viewportHeight);
}, viewportHeight);
await wait(300);
viewportIncr = viewportIncr + viewportHeight;
}
*/
// Scroll back to top
await page.evaluate(() => {
window.scrollTo(0, 0);
});
// Some extra delay to let images load
await wait(100);
// return await page.screenshot({ path: '.output/url_pup.png',type: 'png',fullPage: true });
let pdfOption: PDFOptions = {
path: '.output/url_prop.pdf',
format: "A4",
width: 1200,
height: totalHeight,
printBackground: true,
scale: 1,
displayHeaderFooter: false,
margin: { top: 5, right: 5, bottom: 5, left: 5 }
}
const buffer = await page.pdf(pdfOption);
return buffer
}
(async () => {
const browser = await puppeteer.launch({
// executablePath: '/usr/bin/chromium',
headless: true,
//args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-gpu']
});
await capture(browser, "https://bma-dashboard.frappet.synology.me/d/ANtkJay4z/4Lic4Li54LmJ4Lie4Li04LiB4Liy4Lij?orgId=1&kiosk")
await browser.close();
})();