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
@ayeshjh
4 жыл бұрын
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
@benedictuyioghosa5667
5 жыл бұрын
Helped alot. Thanks
@robings6489
4 жыл бұрын
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');"
@jollywgiant1760
3 жыл бұрын
This has helped so much! Thanks for leaving this here! :D
@tapendrakumar614
Жыл бұрын
Thank yo bro
@cyberguide_in
5 жыл бұрын
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
@mridul549
7 ай бұрын
Been almost 6 years since this has been uploaded, and it still works like a charm, thanks man!
@optikalefx
7 ай бұрын
Wow, 6 years. Thanks for watching and coming back!
@PiyushAggarwal-hz9es
4 ай бұрын
True
@samking618
3 ай бұрын
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?
@weltmeister
4 жыл бұрын
I've been looking for something similar to this for two weeks now, thanks man :)
@qudsiasart456
2 ай бұрын
please made a video on its deployment
@TheKNdheeraj0
5 жыл бұрын
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!!
@TheKNdheeraj0
5 жыл бұрын
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);
@optikalefx
5 жыл бұрын
@@TheKNdheeraj0 Yep, you need to respond with the binary data, and set the content-type so the browser knows how to read it.
@TheKNdheeraj0
5 жыл бұрын
@@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
@optikalefx
5 жыл бұрын
@@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
@TheKNdheeraj0
5 жыл бұрын
@@optikalefx cool, will try and let you know
@chovbee
Ай бұрын
6 years later and this video has set me up in 10 minutes with a base to really build off of. Very clear and helpful tutorial and I really appreciate it!
@b4bharat1
3 жыл бұрын
Saved my life. Thanks a lot.
@PiyushAggarwal-hz9es
4 ай бұрын
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
@arunhosamani8903
4 жыл бұрын
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?
@afrieirham_
3 жыл бұрын
Great tutorial! It would be nice if you could provide the source code though.
@unusuario5173
3 жыл бұрын
Jesus Christ, man. He only used like 20 lines of code.
@afrieirham_
3 жыл бұрын
@@unusuario5173 I mean there's no harm in sharing the code right?
@unusuario5173
3 жыл бұрын
@@afrieirham_ wow 🙄. If you're a student, choose another major. This isn't for you.
@afrieirham_
3 жыл бұрын
@@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. 😂
@unusuario5173
3 жыл бұрын
@@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.
@creativeplanet2820
5 жыл бұрын
page.emulateMedia is not a function, :( !
@optikalefx
5 жыл бұрын
that means your page variable is messed up. console.log your page variable and see what's up with it.
@justinlisota3885
4 ай бұрын
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}
@xCloudy70
2 ай бұрын
that's a version problem, try to use a old version of puppeteer
@naveenbisht4627
8 ай бұрын
Thanks man
@vinnnnnny12345
4 жыл бұрын
Nice! how would I send users uploaded pdf file to email?
@Bomb4stic
3 жыл бұрын
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 ?
@WongCupu-wb3hd
Жыл бұрын
Nice
@saurabhmangal6322
5 жыл бұрын
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.
@youee1234
5 жыл бұрын
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' ^_^
@optikalefx
5 жыл бұрын
Thanks! Cool, I hadn't used npm i that way before. Good call!
@ashvinshetty5582
7 ай бұрын
Can we also use when there are images in the html?
@NavinKumarmathur
4 жыл бұрын
how to make specific portion of the html to pdf. i am trying to make pdf of 700px*1100px but it renders all screen.
@md.shahebali38
3 жыл бұрын
What about if there are some image with reletive path inside html? Will it render those image in pdf?
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" }
@cesarariza6310
6 жыл бұрын
Is there any way to upload images in the pdf?
@optikalefx
6 жыл бұрын
put them in there with img tags. Make sure to wait for the images to load before rendering the pdf
@paulodallastra4163
4 жыл бұрын
@@optikalefx how would you make sure the images are loaded before rendering the pdf?
@optikalefx
4 жыл бұрын
@@paulodallastra4163 Using page.goto with a networkIdle check
@optikalefx
4 жыл бұрын
@@paulodallastra4163 See github.com/GoogleChrome/puppeteer/issues/728
@paulodallastra4163
4 жыл бұрын
@@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.
@saianuragdoddi529
3 жыл бұрын
Great tutorial, but can i know how to print the generated pdf on a web page ?
@libbylebyane3681
4 жыл бұрын
What theme are you using for VS CODE?
@elyu_vibes
5 жыл бұрын
I am able to generate a pdf file but I'm wondering why it's so slow about 20seconds
@ejsolano
3 жыл бұрын
Thank you very much! I have been looking for something similar.
@Halissonskalee
3 жыл бұрын
wow! NICE!!! thanks you!
@silentsnake27
5 жыл бұрын
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?
@securebits7043
3 жыл бұрын
same ehere
@iyobosajefferson6457
Жыл бұрын
This is awesome man! Clear and straight to the point.
@rexxy003
6 жыл бұрын
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.
@optikalefx
6 жыл бұрын
Are you wanting to scrape/submit a form, or are you just talking about HTML forms in general?
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.
@ankitkumardubey0095
2 жыл бұрын
so apparently you gotta include a semicolon after require statements
@SoftwareSolutons
6 жыл бұрын
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?
@optikalefx
6 жыл бұрын
Yep, just open the PDF with the button, or use
@rabbit_mac
5 жыл бұрын
your video helped me a lot thanks..
@relapse3152
4 жыл бұрын
What is the IDE you're using?
@weltmeister
4 жыл бұрын
vscode
@pratimap123
6 жыл бұрын
has anyone tried an image tag in handlebars template ? The pdf generated is not having the image
@optikalefx
6 жыл бұрын
I've got this Q enough to make a new video. You need to wait for the image to load before PDFing. See kzitem.info?redir_token=9NJz4a_IcRstnNBrFNec-071GzN8MTUzOTc3NDczOUAxNTM5Njg4MzM5&q=https%3A%2F%2Fgithub.com%2FGoogleChrome%2Fpuppeteer%2Fissues%2F728&event=comments for fix
@justrobin1234
5 жыл бұрын
Do you actually type this fast? Full sized keyboard? Very impressive.
@optikalefx
5 жыл бұрын
Lol. When you program everyday, I guess you get used to it.
@gasgasfremy
5 жыл бұрын
Hello, nice tuto. very useful :) thank you!
@DB-kl7il
5 жыл бұрын
hi! just curious, what recorder do you use and what is the recording resolution!!? Text is so clean.
@optikalefx
5 жыл бұрын
I use ScreenFlow Pro. Resolution is just 1080p after it's compressed. Thanks!
@ashrafsaleh8654
4 жыл бұрын
super tutorial
@robertoalvesdesousajunior7259
5 жыл бұрын
how to download instead of save in the application root? please
@TheKNdheeraj0
5 жыл бұрын
You can check my Solution here: kzitem.info/news/bejne/moydzZx9hKqQZJg&lc=UgxHyeyek4OuKI70IB14AaABAg.8qMojiuGE558qMttxSHBsC Hope this helps!!
@shahnooralamnilim891
5 жыл бұрын
Thanks a lot man. its help me a lot
@madhurikhandagale2297
5 жыл бұрын
yeahhhhhhhhhhhhhhhhhhh... thank you :) it works
@VivekKumar-fk4je
5 жыл бұрын
thanku u for this tuto. but i want to know that if it is possible to save on local file system insted on server?
@davidlira8853
4 жыл бұрын
yeah, i think so. Are you from HackReactor?
@user-ui8my9zs7o
6 жыл бұрын
Any way to do HTML to some type of doc file?
@optikalefx
6 жыл бұрын
What kind of doc file? Like google doc? Or word doc?
@วงศ์ไกรจันทะจิต
4 жыл бұрын
thank you
@babuinotech8299
5 жыл бұрын
Thanks
@carlosbolivarzapata1531
5 жыл бұрын
Thank u for this tutorial.
@robertoalvesdesousajunior7259
5 жыл бұрын
Do you have any examples using EJS?
@optikalefx
5 жыл бұрын
I don't, but if you just grab the ejs node module instead of the handlebars one, it should be relatively the same.
@robertoalvesdesousajunior7259
5 жыл бұрын
@@optikalefx worked correctly, thanks!
@andretessmer2851
5 жыл бұрын
Can I do it in Cloud Functions?
@optikalefx
5 жыл бұрын
As long as you can install puppeteer on them.
@zineddineouchikh5304
5 жыл бұрын
but if we have dynamic content , that make a problem when we have many pages
@optikalefx
5 жыл бұрын
What issues do you have with dynamic content?
@zineddineouchikh5304
5 жыл бұрын
@@optikalefx the isue is he write text between pages
@optikalefx
5 жыл бұрын
@@zineddineouchikh5304 You can use CSS to declare page-breaks to have multiple pages.
@zineddineouchikh5304
5 жыл бұрын
@@optikalefx i used it , but the issue still
@pazfelipe
6 жыл бұрын
Excellent tutorial but my hbs file is not working.
@optikalefx
6 жыл бұрын
Can you give me a little more info about what isn't working?
@pazfelipe
6 жыл бұрын
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.
@optikalefx
6 жыл бұрын
Can you put your code on github and send me a link? I can take a look for you
@pazfelipe
6 жыл бұрын
Puppeteer is my service that renders my hbs file and my controller calls this service. github.com/pazfelipe/testing.git
@optikalefx
6 жыл бұрын
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.
@NOName-qy2zv
6 жыл бұрын
bro will this displays or converts background image in html page to pdf ?
@optikalefx
6 жыл бұрын
Yep, just set printBackground to true
@NOName-qy2zv
6 жыл бұрын
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
@optikalefx
6 жыл бұрын
NO Name read the HTML file in just like we're doing around minute 8-9 in the video.
@NOName-qy2zv
6 жыл бұрын
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
@optikalefx
6 жыл бұрын
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.
@MrPkmonster
4 жыл бұрын
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.
@williammutua
2 жыл бұрын
Hope this is not too late, just hit Ctrl + '+' to zoom in or Ctrl + "- to zoom out
@CodeGoblin
4 жыл бұрын
hi, thanks for uploading this. Would you happen to know how to upload local images into handlebars that can be compiled through puppeteers pdf?
@robings6489
4 жыл бұрын
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');"
@ashimagoyal4968
2 жыл бұрын
@@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.
@robings6489
2 жыл бұрын
@@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?
6 жыл бұрын
way too much to type give me a link?
@optikalefx
6 жыл бұрын
The important bit is just the page.pdf(); function.
@rssidhu10
5 жыл бұрын
Thanks a lot. Is there any way to add watermark in the pdf file?
@optikalefx
5 жыл бұрын
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.
Пікірлер: 151