Generate PDFs (From HTML & CSS) with NodeJS and Puppeteer
ฝัง
- เผยแพร่เมื่อ 28 พ.ค. 2018
- 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.
- วิทยาศาสตร์และเทคโนโลยี
I've been looking for something similar to this for two weeks now, thanks man :)
Been almost 6 years since this has been uploaded, and it still works like a charm, thanks man!
Wow, 6 years. Thanks for watching and coming back!
True
This is awesome man! Clear and straight to the point.
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 about if there are some image with reletive path inside html? Will it render those image in pdf?
This is awesome. I tried to do the pdfs using some react libraries and I thought why can't I make them work properly with less work. Now, I know we can use backend for that
Thank you very much! I have been looking for something similar.
how to make specific portion of the html to pdf. i am trying to make pdf of 700px*1100px but it renders all screen.
your video helped me a lot thanks..
Hello,
nice tuto. very useful :)
thank you!
Thanks a lot man. its help me a lot
Helped alot. Thanks
Can we also use when there are images in the html?
I am able to generate a pdf file but I'm wondering why it's so slow about 20seconds
What theme are you using for VS CODE?
such an useful tool, thanks
Nice! how would I send users uploaded pdf file to email?
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:\xampp\htdocs\PUPPETEER PDF GENERATION\templates','shot-list.hbs'] {
errno: -4058,
code: 'ENOENT',
syscall: 'open',
path: "C:\\xampp\\htdocs\\PUPPETEER PDF GENERATION\\templates','shot-list.hbs"
}
thanku u for this tuto. but i want to know that if it is possible to save on local file system insted on server?
yeah, i think so. Are you from HackReactor?
Thank u for this tutorial.
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.
I am not able to pass dynamic content to html hbs file
i tried this
{{#each data as |users|}}
{{users.username1}}
{users.username2}}
{{/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?
Is it possible , to have two button , one to generate pdf and the other to view that generated pdf so we can see how it looks only then and we can print?
Yep, just open the PDF with the button, or use
Great tutorial, but can i know how to print the generated pdf on a web page ?
hi! just curious, what recorder do you use and what is the recording resolution!!? Text is so clean.
I use ScreenFlow Pro. Resolution is just 1080p after it's compressed. Thanks!
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
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?
same ehere
Nice! How can I apply this using a form? Submit a form and generates the pdf with the input values and send it over an email as attached pdf? I’m looking something similar to phptopdf library but from nodejs.
Are you wanting to scrape/submit a form, or are you just talking about HTML forms in general?
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
wow! NICE!!! thanks you!
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');"
This has helped so much! Thanks for leaving this here! :D
Thank yo bro
has anyone tried an image tag in handlebars template ? The pdf generated is not having the image
I've got this Q enough to make a new video. You need to wait for the image to load before PDFing. See th-cam.com/users/redirect?redir_token=9NJz4a_IcRstnNBrFNec-071GzN8MTUzOTc3NDczOUAxNTM5Njg4MzM5&q=https%3A%2F%2Fgithub.com%2FGoogleChrome%2Fpuppeteer%2Fissues%2F728&event=comments for fix
I had a type error on the IIFE "TypeError: (intermediate value)(...) is not a function" but solved it by putting a semicolon right before the opening bracket i.e. ;(async function...)(); Also, I had a problem with registering the Handlebars helper after the compile function declaration so I put it before that and everything worked! This is really great @optikalefx, I have been mulling making a web app for my business but I needed PDF exporting and all the other solutions (PDFKit, etc.) looked far too complicated and time consuming.
so apparently you gotta include a semicolon after require statements
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:\Users\BK\Desktop\JavaScript\Node\DialogFlow\PdfGenerator\templates
esume.hbs']
errno: -4058,
code: 'ENOENT',
syscall: 'open',
path:
'C:\\Users\\BK\\Desktop\\JavaScript\\Node\\DialogFlow\\PdfGenerator\\templates\
esume.hbs' }
Would you mind having a look at the code - github.com/bkwebdeveloper/generating-pdfs/blob/master/src/app.js
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.
Hope this is not too late, just hit Ctrl + '+' to zoom in or Ctrl + "- to zoom out
Any way to do HTML to some type of doc file?
What kind of doc file? Like google doc? Or word doc?
backend guys, how do you guys work with in templates (HTML & CSS) in real apps? For e.g I want to create invoice pdf using a template, so is there a way to generate templates with our desired look and feel from somewhere or we have to write HTML and CSS from scratch ourself?
Thanks man
yeahhhhhhhhhhhhhhhhhhh... thank you :) it works
super tutorial
how to download instead of save in the application root? please
You can check my Solution here: th-cam.com/video/9VgghGKx_1c/w-d-xo.html&lc=UgxHyeyek4OuKI70IB14AaABAg.8qMojiuGE558qMttxSHBsC Hope this helps!!
thank you
How can I store the generated PDF file in a variable so that it can sent as an output to a Rest Endpoint instead of saving it locally in my project!!
I was able to come up with the solution, by hit and trail. So here it is:
1. Save the generated PDF into a variable:
const pdf = await page.pdf({
format: "A4",
printBackground: true
});
2. Then those using restify (Node Framework):
res.writeHead(200, {
"Content-Type": "application/pdf",
"Content-Disposition": `inline; filename= my.pdf`
});
res.end(pdf);
2. Those using express (Node Framework) (most probably):
res.setcontentType("application/pdf");
res.send(pdf);
@@TheKNdheeraj0 Yep, you need to respond with the binary data, and set the content-type so the browser knows how to read it.
@@optikalefx How can I add online image to my puppeteer PDF file, I was able to achieve local images into my puppeteer using base64 string!! Can you help me with online images
@@TheKNdheeraj0 add `{ waitUntil: ['domcontentloaded', 'networkidle2'] }` as the 2nd param to setContent, which tells pptr to wait until images have loaded before moving to the render step
@@optikalefx cool, will try and let you know
Can I do it in Cloud Functions?
As long as you can install puppeteer on them.
What is the IDE you're using?
vscode
Thanks
Nice
can you give me full project
Is there any way to upload images in the pdf?
put them in there with img tags. Make sure to wait for the images to load before rendering the pdf
@@optikalefx how would you make sure the images are loaded before rendering the pdf?
@@paulodallastra4163 Using page.goto with a networkIdle check
@@paulodallastra4163 See github.com/GoogleChrome/puppeteer/issues/728
@@optikalefx I will defiantly subscribe after you answering me that fast. Unfortunately using page.goto and the networkldle2 as parameters is not working well. It recognizes the space where the image was supposed to be but it is only rendering an empty box or a full white background instead.
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' ^_^
Thanks! Cool, I hadn't used npm i that way before. Good call!
please made a video on its deployment
Do you actually type this fast? Full sized keyboard? Very impressive.
Lol. When you program everyday, I guess you get used to it.
hi, thanks for uploading this. Would you happen to know how to upload local images into handlebars that can be compiled through puppeteers pdf?
Couldn't do it either but there is a workaround. 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');"
@@robings6489 Hi!! I tried getting the picture rendered through the way you suggested but it is not appearing in the nameOfSavedPdf.html. My image is in the same folder as hbs template. I use . It works if I use any othe rimage from the web but doesn't work for the local image.
@@ashimagoyal4968 I'm sorry but I don't remember the details, it has been too long :D Maybe the file path is wrong and has to have ./ or / in front of it?
Do you have any examples using EJS?
I don't, but if you just grab the ejs node module instead of the handlebars one, it should be relatively the same.
@@optikalefx worked correctly, thanks!
Thanks a lot.
Is there any way to add watermark in the pdf file?
Yea for sure. I would just add the image in the HTML, and use position fixed or absolute with a z-index to make sure it's on top. Then when you turn that HTML into a PDF it will be superimposed on top.
bro will this displays or converts background image in html page to pdf ?
Yep, just set printBackground to true
bro can i fetch a .html page data to setContent()
actually im trying to convert a html page to pdf
i have index.htm page with css (external css) and bg image now i want to pass this html page(or data) to setContent() so that it will convert the page to pdf
NO Name read the HTML file in just like we're doing around minute 8-9 in the video.
bro its working for external css and bg image is not displaying
below is my jscode
const pupp = require ('puppeteer');
const fs = require('fs-extra');
const path = require('path');
//const hbs=require('handlebars');
const compile=(async function(name){
const filepath=path.join(process.cwd(),'Certificatecss',`${name}.html`);
const html=await fs.readFile(filepath,'utf-8');
return html;
});
(async function () {
try{
const browser = await pupp.launch();
const page = await browser.newPage();
const content= await compile('index');
await page.setContent(content);
await page.emulateMedia('screen');
await page.pdf({
path:'mypdf.pdf',
format:'A4',
printBackground:true
});
console.log('done');
await browser.close();
process.exit();
}
catch (e){
console.log('our errors',e);
}
})();
im not getting any error
below is my html code
fasak
h1{
color:red;
}
body{
background-image: url("c.png");
background-repeat: no-repeat;
}
Hello
'Hello' is shown in red color in pdf but background image is not displayed i tried with different image formats non worked for me
Figured it out. See github.com/GoogleChrome/puppeteer/issues/728 for the answer. The problem is that puppeteer isn't waiting for your image to load before rendering. Using page.goto with a networkIdle check fixes the issue.
but if we have dynamic content , that make a problem when we have many pages
What issues do you have with dynamic content?
@@optikalefx the isue is he write text between pages
@@zineddineouchikh5304 You can use CSS to declare page-breaks to have multiple pages.
@@optikalefx i used it , but the issue still
Great tutorial! It would be nice if you could provide the source code though.
Jesus Christ, man. He only used like 20 lines of code.
@@unusuario5173 I mean there's no harm in sharing the code right?
@@afrieirham_ wow 🙄. If you're a student, choose another major. This isn't for you.
@@unusuario5173 I can't believe CS is not for me just because I want to refer his code. What's more unbelievable is why are you so offended? I'm not asking from you. I can't believe someone is offended with this. 😂
@@afrieirham_ if you can't type 20 lines of code from someone else, someone who already gave you the answer, then your actual professional life would be nightmare, because it ain't just 20 likes of code what you will be asked to do on a daily basis.
Save yourswlv the hassle, pick some other major, like social studies or philosophy.
page.emulateMedia is not a function, :( !
that means your page variable is messed up. console.log your page variable and see what's up with it.
Outdated: browser.page() is not a function
Update const page = browser.page (); ---> const page = await browser.newPage ();
Update const page = browser.page (); ---> const page = await browser.newPage ();
Excellent tutorial but my hbs file is not working.
Can you give me a little more info about what isn't working?
I did exactly what you did but my hbs cannot compile the data passed. I got this json as example:
var d = {
month: 'julho',
author: 'Felipe Paz'
}
const content = await compile('teste', d);
but my data is not rendered by handlebars.
Can you put your code on github and send me a link? I can take a look for you
Puppeteer is my service that renders my hbs file and my controller calls this service.
github.com/pazfelipe/testing.git
so first thing I notice, is that you didn't change the path to the hbs file in the compile function. It's still thinking there is a templates directory that has the file.
way too much to type give me a link?
The important bit is just the page.pdf(); function.
new to nodejs so when i follow along and try and run my index.js it just times out and does not generate anything. any help would be great:
PDF Gen Error TimeoutError: Timed out after waiting 30000ms
at c:\Users\lis3150\pdfGen
ode_modules\puppeteer-core\lib\cjs\puppeteer\common\util.js:289:19
at c:\Users\lis3150\pdfGen
ode_modules\puppeteer-core\lib\cjs\third_party
xjs
xjs.js:3986:35
at OperatorSubscriber2._this._next (c:\Users\lis3150\pdfGen
ode_modules\puppeteer-core\lib\cjs\third_party
xjs
xjs.js:1055:13)
at Subscriber2.next (c:\Users\lis3150\pdfGen
ode_modules\puppeteer-core\lib\cjs\third_party
xjs
xjs.js:678:16)
at AsyncAction2. (c:\Users\lis3150\pdfGen
ode_modules\puppeteer-core\lib\cjs\third_party
xjs
xjs.js:4863:24)
at AsyncAction2._execute (c:\Users\lis3150\pdfGen
ode_modules\puppeteer-core\lib\cjs\third_party
xjs
xjs.js:1974:16)
at AsyncAction2.execute (c:\Users\lis3150\pdfGen
ode_modules\puppeteer-core\lib\cjs\third_party
xjs
xjs.js:1963:26)
at AsyncScheduler2.flush (c:\Users\lis3150\pdfGen
ode_modules\puppeteer-core\lib\cjs\third_party
xjs
xjs.js:2235:30)
at listOnTimeout (c:\Users\lis3150\pdfGen\lib\internal\timers.js:569:17)
at process.processTimers (node:internal/timers:512:7) {name: 'TimeoutError', stack: 'TimeoutError: Timed out after waiting 30000ms…ss.processTimers (node:internal/timers:512:7)', message: 'Timed out after waiting 30000ms', cause: undefined}
that's a version problem, try to use a old version of puppeteer