Node.js Puppeteer PDF Resume Builder to Convert HTML & Handlebars Template With CSS to PDF Document in Browser Using Javascript Full Project For Beginners

 

 

 

npm init -y

 

 

npm i puppeteer

 

 

app.js

 

 

const fs = require("fs");
const path = require("path");
const puppeteer = require('puppeteer');
const handlebars = require("handlebars");

async function createPDF(data){

	var templateHtml = fs.readFileSync(path.join(process.cwd(), 'template.html'), 'utf8');
	var template = handlebars.compile(templateHtml);
	var html = template(data);

	var milis = new Date();
	milis = milis.getTime();

	var pdfPath = path.join('pdf', `${data.name}-${milis}.pdf`);

	var options = {
		width: '1230px',
		headerTemplate: "<p></p>",
		footerTemplate: "<p></p>",
		displayHeaderFooter: false,
		margin: {
			top: "10px",
			bottom: "30px"
		},
		printBackground: true,
		path: pdfPath
	}

	const browser = await puppeteer.launch({
		args: ['--no-sandbox'],
		headless: true
	});

	var page = await browser.newPage();
	
	await page.goto(`data:text/html;charset=UTF-8,${html}`, {
		waitUntil: 'networkidle0'
	});

	await page.pdf(options);
	await browser.close();
}

const data = {
	title: "A new Brazilian School",
	date: "05/12/2018",
	name: "Rodolfo Luis Marcos",
	age: 28,
	birthdate: "12/07/1990",
	course: "Computer Science",
	obs: "Graduated in 2014 by Federal University of Lavras, work with Full-Stack development and E-commerce."
}

createPDF(data);

 

 

template.html

 

 

<!DOCTYPE html>
<html>
<head>
	<title>Student's profile</title>
	<head>
	<style type="text/css">
		body{
			width: 1200px;
			margin: 0;
			padding: 0px;
			font-size: 16px;
			line-height: 24px;
			font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
			color: rgb(33,33,33);
		}
		.report-header{
			background: rgb(55,39,114);
			color: rgb(255,255,255);
			padding: 15px;
			padding-left: 200px;
			box-sizing: border-box;
			display: block;
			position: relative;
		}
		.report-header .logo{
			position: absolute;
			top: 40px;
			left: 15px;
			width: 150px;
		}
		.report-footer{
			background: rgb(55,39,114);
			color: rgb(255,255,255);
			padding: 15px;
			box-sizing: border-box;
			display: block;
			position: relative;
		}
		.report-body{
			width: 70%;
			display: inline-block;
			position: relative;
			padding: 15px;
			box-sizing: border-box;
			vertical-align: top;
		}
		.report-photo{
			width: 28%;
			display: inline-block;
			position: relative;
			vertical-align: top;
			box-sizing: border-box;
			margin-top: 15px;
		}
		.report-photo img{
			width: 100%;
		}
		.report-body .info p{
			border: rgb(204,204,204) solid 1px;
			padding: 5px;
			display: block;
			position: relative;
		}
	</style>
	<meta charset="utf-8">
</head>
<body>
	<div class="report-header">
		<img src="https://www.activfirst.co.uk/wp-content/uploads/logo-example.jpg" class="logo">
		<h3>{{title}}</h3>
		<p>{{date}}</p>
	</div>
	<div class="report-body">
		<div class="info">
			<p>Student: {{name}}</p>
			<p>OEN: {{oen}}</p>
			<p>Age: {{age}}</p>
			<p>Birthdate: {{birthdate}}</p>
			<p>Course: {{course}}</p>
		</div>
		<div class="obs">
			<p>Obs: {{obs}}</p>
		</div>
	</div>
	<div class="report-photo">
		<img src="https://avatars1.githubusercontent.com/u/16254838?s=460&v=4">
	</div>
	<div class="report-footer">
		A generic Company - All Rights reserved.
	</div>
</body>
</html>

 

See also  Build a Mini Arithmetic Calculator Widget (Add,Subtract,Divide,Multiply) in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

DOWNLOAD FULL SOURCE CODE

 

Leave a Reply