I want to generate images from the HTML string using Puppeteer. I have created the HTML template as a separate page and loaded the same using puppeteer pdf conversion. Once I load the PDF, it was giving the else data but the images are not loading properly.
const puppeteer = require('puppeteer');
const fs = require('fs');
const handlebars = require('handlebars');
const path = require('path');
const generateCertificate = async (data, traineeName, trainingPlanTitle) => {
const browser = await puppeteer.launch({ headless: true });
const page = await browser.newPage();
await page.setContent(data, { waitUntil: 'domcontentloaded' });
const pdf = await page.pdf({
path: `${traineeName}_${trainingPlanTitle}.pdf`,
format: 'a4',
landscape: true,
});
await browser.close();
return pdf;
};
HTML Code
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Open Sans"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=MonteCarlo"
rel="stylesheet"
/>
<style type="text/css">
.container {
position: relative;
display: flex;
background: #e7e9eb;
height: 595px;
width: 842px;
}
.box {
display: flex;
background: white;
height: 501px;
width: 748px;
margin: 47px;
z-index: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="logo">
<img src="{{logoImageURL}}" alt="img" />
</div>
<div class="sign">
<img src="{{signUrl}}" alt="img" />
</div>
<div class="text2">
<p style="font-family: Open Sans">
Successful completion of the training
</p>
</div>
<div class="club">
<p style="font-family: Open Sans">{{trainingPlanTitle}}</p>
</div>
<div class="text3">
<p style="font-family: Open Sans">
in the duration of {{startDate}} to {{endDate}} under {{clubName}}
</p>
</div>
</div>
<p class="text6">Powered by Tech Club</p>
</div>
</body>
</html>
The problem is, Puppeteer doesn't load the firebase image, and I am not sure how to point this. Also when I run the html file along the images are properly loading. It is not taking external fonts also.
I solved the above problem by changing '
domcontentloaded' to 'networkidle0'