I am try to generate a pdf using puppeteer with my on custom HTML template.The problem I am facing is that when I set configuration in puppeteer config with "headless: false" to show virtual dom the chart is loading perfectly and it populate the data perfectly.
Now when i click on download (basically generate pdf), It is not loading the chart properly.
I have tried some options to wait like "await page.setContent(html, { waitUntil: ["load","networkidle0"] });" to wait until the data has been load into chartjs, but didn’t get the aspected ouput. here is my code.
async generatePdfFromHtml(html: string): Promise<Buffer> {
try {
const browser = await puppeteer.launch({
headless: false,
defaultViewport: null,
// executablePath: '/usr/bin/chromium-browser',
// args: ['--no-sandbox', '--disable-setuid-sandbox'],
});
const page = await browser.newPage();
await page.setContent(html, { waitUntil: ["load","networkidle0"] });
await page.addStyleTag({
content: `
* {
transition: none !important;
animation: none !important;
}
`,
});
const pdfBuffer = await page.pdf({
format: 'A4',
margin: {
top: '50px',
right: '30px',
bottom: '50px',
left: '30px',
},
printBackground: true,
});
setTimeout(async () => {
await browser.close(); // Close the browser after 2 mint
}, 120000);
// await browser.close();
return pdfBuffer;
} catch (error) {
console.log('ERR:', error);
}
}
here is my html code in which i am including chartjs as cdn.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Assessment</title>
<!-- <link rel="stylesheet" type="text/css" href="./assessment.css" /> -->
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
color: white;
background-color: black;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
/* border: 1px solid white; */
width: 80%;
margin: 0 auto;
max-width: 1200px;
padding: 10px 20px;
}
.title {
width: 100%;
text-align: center;
margin: 20px 0;
}
.container h4 {
margin: 20px 0;
}
.container p {
margin: 20px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="title">
<h2>BIQ Result</h2>
<h4>Score</h4>
</div>
<div class="container">
<h4>Dear Rashid</h4>
<p>
Thanks for completing the BIQ assessment. Your scores indicate your
strength in each of the 5 star system. Stop, Think, Assess, Respond,
Review.
</p>
<p>
Each of the STARR skill set support your well being, living from
purpose,self and other awarness, improved job relationship, descion
making, effective responsiveness and refinning your behaviors for
effective habits.
</p>
<p>Each of the STARR skill sets is addressed in BIQ app.</p>
<h4>Now you know where to start. so let's begins!</h4>
<div
class="row-graph"
style="width: 100%; height: 350px; overflow: hidden"
>
<canvas id="myChart" height="200"></canvas>
</div>
</div>
<div class="title">
<h4>Score</h4>
</div>
<div class="container">
<p>
Stop includes your ability to interrupt unproductive Thoughts, Feeling
and Behaviors in order to be able to Think about your goals, Decide
what to Do, Make the Plan for Doing It and then Responding.
</p>
<h4>Because we are humans we have a full range of em</h4>
<p>
Content for respondents who score in this range. Content for
respondents who score in this type. <br />Content for respondents who
score in this type. <br />Content for respondents who score in this
type. <br />Content for respondents who score in this type.
</p>
<p>
Your Global BIQ scores is based on the responses to S, T, A, R, R.<br />The
goal is to have this at least 80%.
</p>
<p>
To determine how.<br />Content for respondents who score in this type.
</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById("myChart");
console.log("ctx: ", ctx);
const myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["stop","think","assess","respond","review","general","globalBIQ","validity"],
datasets: [
{
axis: "y",
label: "",
data: [48,62,58,70,60,55,0,50],
fill: false,
barThickness: 6,
backgroundColor: [
"rgb(244,67,54)",
"rgb(255,152,0)",
"rgb(255,235,59)",
"rgb(76,175,80)",
"rgb(33,150,243)",
"rgb(0,166,156)",
"rgb(139,24,229)",
"rgb(11,130,91)",
],
borderColor: [
"rgb(244,67,54)",
"rgb(255,152,0)",
"rgb(255,235,59)",
"rgb(76,175,80)",
"rgb(33,150,243)",
"rgb(0,166,156)",
"rgb(139,24,229)",
"rgb(11,130,91)",
],
},
],
},
options: {
indexAxis: "y",
maintainAspectRatio: false,
scales: {
x: {
stacked: true,
},
y: {
stacked: true,
},
},
},
});
</script>
</body>
</html>
in virtual dom it loads like: 
while when i download file it look like:
Thanks for you cooperation.
