Oh man! This is a great tool to generate PDFs from HTML. We build a little template engine with handlebars, and render that into a PDF on the fly with puppeteer….(read more)
Convert Word 2 PDF: Word to PDF Converter
Convert PowerPoint 2 PDF: PPT to PDF Converter
Convert Excel 2 PDF: Excel to PDF Converter
Convert an Image 2 PDF: Image to PDF Converter
Convert HTML 2 PDF: HTML to PDF Converter
More Tools: PDF Converter
Great tutorial! It would be nice if you could provide the source code though.
What about if there are some image with reletive path inside html? Will it render those image in pdf?
wow! NICE!!! thanks you!
Thank you very much! I have been looking for something similar.
any ideo to open the file automatically after saving
Great tutorial, but can i know how to print the generated pdf on a web page ?
Thank you very much for the video, Seems that now emulateMedia is called emulateMediaType, But I ended opting out of this step since it brokes the styles
Saved my life. Thanks a lot.
I am using Puppeteer for Angular and backend MongoDB, what is your approach to do that ?
I am sending data from FE to BE and then I want with this data to create PDF and then with get request to call the pdf and to download it ?
What theme are you using for VS CODE?
Hi @optikalefx, your tutorial is extremely useful, but I am finding it difficult displaying database.json data; I keep getting this error log:
our error [Error: ENOENT: no such file or directory, open 'C:xampphtdocsPUPPETEER PDF GENERATIONtemplates','shot-list.hbs'] {
errno: -4058,
code: 'ENOENT',
syscall: 'open',
path: "C:\xampp\htdocs\PUPPETEER PDF GENERATION\templates','shot-list.hbs"
}
I am not able to pass dynamic content to html hbs file
i tried this
{{#each data as |users|}}
<tr>
<td class="fontWeight-700">{{users.username1}}</td>
<td>{users.username2}}</td>
</tr>
{{/each}}
in hbs file but i am not getting any data on generated pdf and when i compile the hbs i seen that after compiling the data for each is not visible in the content any suggestion?
Thank you so much for your tutorial. Could I ask you a question? How can you zoom in the code? Do you use any software to do that? Thank you.
Why this not working electron windows build. error occurred after "const browser = await puppeteer.launch( )"
ERROR messsage : ErrorError: Failed to launch the browser process! spawn
If somebody is looking for a way to display images in the pdf, this worked for me: Save the compiled html file of handlebars first and access it with "await page.goto(`file:${filePath}`, { waitUntil: 'networkidle0' });" instead of using page.setContent. The filePath variable is: "const filePath = path.join(process.cwd(), 'nameOfSavedPdf.html');"
how to make specific portion of the html to pdf. i am trying to make pdf of 700px*1100px but it renders all screen.
hi, thanks for uploading this. Would you happen to know how to upload local images into handlebars that can be compiled through puppeteers pdf?
thank you
Nice! how would I send users uploaded pdf file to email?
I've been looking for something similar to this for two weeks now, thanks man 🙂
super tutorial
What is the IDE you're using?
Hi. I have a problem with the generated pdf, the html is generated and rendered with hbs perfectly but the css styles are not generated in the pdf.
What do you think is causing it?
Helped alot. Thanks
Thanks
You are super awesome! thanks for your channel.
BTW, do you know you can install multiple npm packages in 1 line: 'npm i pupeteer fs-extra' ^_^
Update const page = browser.page (); —> const page = await browser.newPage ();
Hi @optikalefx, I couldn't get the pdf generated. Looks like there is a problem with this line: const html = await fs.readFile(filePath, 'utf-8');
Here is the error:
Error { [Error: ENOENT: no such file or directory, open 'C:UsersBKDesktopJavaScriptNodeDialogFlowPdfGeneratortemplatesresume.hbs']
errno: -4058,
code: 'ENOENT',
syscall: 'open',
path:
'C:\Users\BK\Desktop\JavaScript\Node\DialogFlow\PdfGenerator\templates\resume.hbs' }
Would you mind having a look at the code – https://github.com/bkwebdeveloper/generating-pdfs/blob/master/src/app.js
your video helped me a lot thanks..
I am able to generate a pdf file but I'm wondering why it's so slow about 20seconds
hi! just curious, what recorder do you use and what is the recording resolution!!? Text is so clean.
Please help somebody… how can I provide my website visitors the option to download a PDF based on what they fill in a HTML-based form, which has options for text/ spacing etc. I am new to web-programming so please list the things i need to learn in order. Thanks.
can you share code on github please!!!!!!!!!!!!!!!!
yeahhhhhhhhhhhhhhhhhhh… thank you 🙂 it works
Thanks a lot.
Is there any way to add watermark in the pdf file?