admin管理员组文章数量:1321606
I'm trying to generate a PDF using Puppeteer and insert there a Chart.js graph (but the whole PDF should be a text based - not a webpage screenshot). When I open the template I can see graph loaded, but in PDF there is just a blank space instead. I'm generating it like this:
async function generatePdf() {
let data = { value: "myValue" };
getTemplateHtml()
.then(async (res) => {
// Now we have the html code of our template in res object
// you can check by logging it on console
// console.log(res)
console.log("Compiing the template with handlebars");
const template = hbpile(res, { strict: true });
// we have pile our code with handlebars
const result = template(data);
// We can use this to add dyamic data to our handlebas template at run time from database or API as per need. you can read the official doc to learn more /
const html = result;
// we are using headless mode
const browser = await puppeteer.launch({ args: ["--no-sandbox"] });
const page = await browser.newPage();
// We set the page content as the generated html by handlebars
await page.setContent(html);
// We use pdf function to generate the pdf in the same folder as this file.
await page.pdf({
path: "output2.pdf",
format: "A4",
displayHeaderFooter: true,
margin: {
top: "2.5cm",
right: "2.5cm",
bottom: "2.5cm",
left: "2.5cm",
},
headerTemplate: "<div></div>",
footerTemplate:
'<div style="width: 100%; font-size: 11px !important; overflow: auto; margin-left: 2.5cm; margin-right: 2.5cm; color: ghostwhite;"><span>TEST</span><a href="; style="float: right; color: #1E90FF; text-decoration: none;">www.test</a></div>',
});
await browser.close();
console.log("PDF Generated");
})
.catch((err) => {
console.error(err);
});
}
generatePdf();
Thanks
I'm trying to generate a PDF using Puppeteer and insert there a Chart.js graph (but the whole PDF should be a text based - not a webpage screenshot). When I open the template I can see graph loaded, but in PDF there is just a blank space instead. I'm generating it like this:
async function generatePdf() {
let data = { value: "myValue" };
getTemplateHtml()
.then(async (res) => {
// Now we have the html code of our template in res object
// you can check by logging it on console
// console.log(res)
console.log("Compiing the template with handlebars");
const template = hb.pile(res, { strict: true });
// we have pile our code with handlebars
const result = template(data);
// We can use this to add dyamic data to our handlebas template at run time from database or API as per need. you can read the official doc to learn more https://handlebarsjs./
const html = result;
// we are using headless mode
const browser = await puppeteer.launch({ args: ["--no-sandbox"] });
const page = await browser.newPage();
// We set the page content as the generated html by handlebars
await page.setContent(html);
// We use pdf function to generate the pdf in the same folder as this file.
await page.pdf({
path: "output2.pdf",
format: "A4",
displayHeaderFooter: true,
margin: {
top: "2.5cm",
right: "2.5cm",
bottom: "2.5cm",
left: "2.5cm",
},
headerTemplate: "<div></div>",
footerTemplate:
'<div style="width: 100%; font-size: 11px !important; overflow: auto; margin-left: 2.5cm; margin-right: 2.5cm; color: ghostwhite;"><span>TEST</span><a href="http://test." style="float: right; color: #1E90FF; text-decoration: none;">www.test.</a></div>',
});
await browser.close();
console.log("PDF Generated");
})
.catch((err) => {
console.error(err);
});
}
generatePdf();
Thanks
Share Improve this question asked Sep 1, 2020 at 16:54 o..oo..o 1,9217 gold badges35 silver badges65 bronze badges 2- Hi, if you have, can you please share the node js and html code of this, I am trying to do a similar thing, and couldn't figure it out. Thanks a lot – Abhishek Soni Commented Aug 17, 2021 at 9:40
- See also How to create a bar chart image on nodejs without a browser?, puppeteer can't find the helpers of nodejs handlebars and using async await and .then together (you're not awaiting or returning your promise chain) – ggorlen Commented Apr 19, 2024 at 23:34
1 Answer
Reset to default 9You need to have Puppeteer wait for the Javascript to execute and render the graph.
You can supply a waitUntil
option to page.setContent
(doc):
await page.setContent(reuslt, {
waitUntil: ["load","networkidle0"]
});
Also, you should disable animation on your chart by setting options.animation.duration
to 0.
You haven't shared your HTML/Javascript so I can't say for sure, but if your Javascript still isn't executed then you can use waitForFunction
to wait until your graph has loaded. See this answer for details.
本文标签: javascriptPuppeteer with ChartjsStack Overflow
版权声明:本文标题:javascript - Puppeteer with Chart.js - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742103947a2420933.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论