Convert Html to Pdf with CSS

I have been trying to follow the below medium link to create PDF from html and I came to know some problems and solutions.

Problems:

  1. My CSS were not getting applied on the generated PDF
  2. Also I want to know whether my page has been loaded before I do the conversion.
  3. I want to get all console.log messages to see if my page has any errors.
  1. Use printBackground: true option in pdf generation api call.
  2. Use Inline CSS in html document.
  3. Use events on page to get console logs and loading status.

Code snippet:

const templateFile = fs.readFileSync(resumeTemplatePath, ‘utf8’);

const template = hb.compile(templateFile, { strict: true });

const result = template({name: ‘Arun Rajeevan’, title: ‘Cloud developer’});

const browser = await puppeteer.launch();

const page = await browser.newPage();

// We set the page content as the generated html by handlebars

page.once(‘load’, async() => {

console.log(‘Page loaded!’);

await page.pdf({ path: ‘resume.pdf’, format: ‘A4’, printBackground: true });

await browser.close();

});

page.on(‘console’, msg => {

for (let i = 0; i < msg.args().length; ++i)

console.log(`${i}: ${msg.args()[i]}`);

});

Suffering from Knowledge Quest

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store