I am using pupeeteer to download the pdf and send it to front-End,
So the below code is the back-end code using pupeeteer
const downloadResumeAsPdf = async (req, res) => {
try {
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
await page.goto('http://localhost:4200/resumeBuilder/preview/resume_ooo', { waitUntil: 'networkidle2' });
const selector = '.resume';
await page.waitForSelector(selector, { timeout: 20000 });
await page.evaluate(async (selector) => {
const container = document.querySelector(selector);
const images = Array.from(container.querySelectorAll('img'));
await Promise.all(images.map(img => {
if (img.complete) return;
return new Promise(resolve => img.onload = img.onerror = resolve);
}));
}, selector);
const pdfBuffer = await page.pdf({
format: 'A4',
printBackground: true,
margin: {
top: '20px',
bottom: '10px'
},
});
console.log('PDF Buffer Size:', pdfBuffer.length);
console.log('PDF saved as output.pdf');
res.set({
'Content-Type': 'application/pdf',
'Content-Disposition': 'attachment; filename="resume.pdf"',
});
res.send(pdfBuffer);
await browser.close();
} catch (error) {
console.error('Error:', error);
res.status(500).send(`An error occurred: ${error.message}`);
}
};
Below is the services code to call the api
getResumeAsPdf() {
const options = { responseType: 'blob' as 'json' };
return this.apiService.post(`${this.targetUrl}/downloadResumeAsPdf`, options);
}
Below is the front-end code which is called when clicked a button
downloadResume() {
this.resumeBuilderService.getResumeAsPdf().subscribe(
(response: Blob) => {
const blob = new Blob([response], { type: 'application/pdf' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'resume.pdf';
link.click();
URL.revokeObjectURL(link.href);
},
(error) => {
console.error('Error downloading the resume:', error);
}
);
}
How to fix this issue ? This is my first stack overflow question..
I have tried using pupeeteer but its not working