DEV Community

How trigger browser to make a PDF from HTML using window.print()

Alin Climente on September 29, 2022

Here is how you can create a pdf from html/css on the client side (no backend or external libraries involved). We will take advantage of the window...
Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

Kind of a misleading article. This really doesn't have anything to do with generating a PDF - it just tells you how to kick your browser to print the current page. The fact that the print dialog may have an option to "Print to PDF" is entirely separate to anything you are doing here - and will likely be dependent on your browser and system. You'll still have to select 'Print to PDF' manually

Collapse
 
varshithvhegde profile image
Varshith V Hegde

But still this is a great article 👍 Keep it up

Collapse
 
good3n profile image
Tom Gooden✨

No, it’s not.

Thread Thread
 
climentea profile image
Alin Climente

tough crowd

Collapse
 
climentea profile image
Alin Climente

Fixed, modified title. Hopefully it's more clear now.

Would be nice if browsers would have some native api's for pdf generation..

Collapse
 
shifi profile image
Shifa Ur Rehman

No. It's better this way. There are other ways you can manage "pdfs" while this tool does all of that and much more. i.e. Print as well.

Not everything needs changing. You wrote a good article. Sure had a wrong title, I wont call it misleading personally. Misleading would be when you'd do that knowingly. Just stick to your findings. Don't defend yourself when you find contradicting information proving you wrong. But don't back down either if otherwise.

Happy dev'ing.

Collapse
 
devarshishimpi profile image
Devarshi Shimpi

Fr. We have Print to PDF in the browser itself. And most modern browsers support it.

Collapse
 
imdkbj profile image
imdkbj • Edited

Why to use js to toggle print button.
This can be achieved by something like as below

  @media print
        #Printout { 
         display: none; 
       }
Enter fullscreen mode Exit fullscreen mode

So basically we can assign a new value to css in print selector.

Collapse
 
climentea profile image
Alin Climente

nice one!

Collapse
 
defite profile image
Nikita Makhov • Edited

Never ever style id's in your css. id's are for js only, classes are good for styling. If for some reason you will need the same functionality in other place it will be better to assign a class for it.

The same goes to !important notation. Usually there is no reason to use it because it's hard to override it.

Collapse
 
climentea profile image
Alin Climente

I agree, styling id's is not a good practice. The !important is needed in this case for window.print() otherwise the browser will not show the pdf as in the html page.

Collapse
 
shifi profile image
Shifa Ur Rehman

I sincerely implore people to do constructive criticism. You only add injury to the salt. The only problem with my dude was that... He is bad at keyword research like you dinosaurs here. Chill. Relax. Get that fixed and if he doesn't do that, go ahead and yell at him for whatever reason. But for God's sake, don't make this toxic for everyone else. I come here for comments more than the articles. Learn much much more that way. If you have nothing good to say, better shut up.

Collapse
 
maame-codes profile image
Maame Afia Fordjour

Didn't know this was possible. Thanks for sharing.

Collapse
 
siddharthdb profile image
Siddharth B

Dear Author,
This article falls in the grey area of click bait based on the title of the article. I would suggest to put some effort in writing a well thought out article by researching on the topic.

For others who felt betrayed by the title, here are some pointers
medium.com/@ayusharma.in/generate-...
bannerbear.com/blog/how-to-convert...

Collapse
 
climentea profile image
Alin Climente

You need a backend for that.

Collapse
 
itsdonnix profile image
Don Alfons • Edited

I did the same thing using puppeteer and end EJS to generate PDF.
Also with pdflib to change the title of the document.

Checkout on gist ->
gist.github.com/donnisnoni/a9fdf25...

Collapse
 
climentea profile image
Alin Climente

You need a backend for that.

 
defite profile image
Nikita Makhov • Edited

I see your points and also I see lack of developer and ui/ux experience in your words. Sure, there will be situations when you need two or more buttons. Modal windows for example.

I would definitely not extend a simple button just to change its color.

Well, why? :D Oh yes, because you will copy/paste buttons and style them with ID's.

:host is interesting but not popular selector, so no, I don't use it everyday, especially when working with frameworks.

Collapse
 
thi3rry profile image
Thierry Poinot

The solution you provide in your article need a browser that supports to print a page into a pdf file. You have a macos device it's ok. You are on mobile, it's not ok.
Your solution juste provide a button to trigger the print action AND to hide this button on the printed version of this page. There is nothing to deals with PDF.

Collapse
 
climentea profile image
Alin Climente

Damn... Indeed on mobile browsers this doesn't work.

 
defite profile image
Nikita Makhov

Read my answer again. I didn't say any word about global styling. You can achieve styling with classes, but styling an id is a bad tone. ID's are good for querying elements in your scripts, but I see no reason in styling them.

Suppose you have two button components. They have similar styles but different background colors. Will you style each id or you create some common class for them and then extend it for different background color situations?

At the end of the day you can write styles as you want. But code practices will help you to maintain and write clean code.

Collapse
 
webjoyable profile image
webjoyable

If it was window.pdf() it would be a neat post, otherwise it's a clickbait

Collapse
 
shashamura profile image
Shashamura1

I really have interest in dev is all about Education to build your self to be self development to be self independent fainacialy and Educatinaly..I am getting improve with all what I am reading in here dev.com

Collapse
 
golfman484 profile image
Driving change

I thought this was going to be about a true HTML to PDF library like the most excellent Flying Saucer which is discussed in this article:

medium.com/javarevisited/html-to-p...

Collapse
 
climentea profile image
Alin Climente

You need a backend for that.

Collapse
 
sampadsarker profile image
Sampad Sarker

OOh, that is very interesting!!!
keep it up

Collapse
 
poopa profile image
poopa

wrong title

Collapse
 
zodman profile image
Andres 🐍 in 🇨🇦 • Edited

and here when the client said! Nooo I want download the pdf file, not print it!

and now you understand its better implement wkhtmltopdf instead of explain.

Collapse
 
climentea profile image
Alin Climente

You need a backend for that. Sometimes this simple things will do the job.

Collapse
 
ryanguitar profile image
Ryan Els

Very interesting article 👍

Collapse
 
anuoluwapoae profile image
Anuoluwapo Balogun

Amazing!

 
defite profile image
Nikita Makhov

Now I see. It's all about web components, which I don't use at all.

Collapse
 
defite profile image
Nikita Makhov

No, it's not. You can't use one id twice in case you want reuse your styles. If you write styles for component and want scoped css, you can use classes, not id's.

Collapse
 
sachadee profile image
SachaDee

Excellent post !!Easy way to generate a PDF and save it where you want!

Collapse
 
imdkbj profile image
imdkbj

And this would be great related to header if u can share, how to programmatically save the pdf which is required to hit by browser pdf action button.

Collapse
 
climentea profile image
Alin Climente

Unfortunately this is not possible with this method..

Collapse
 
shbz profile image
Shahbaz

Nice you have shared a good content!

Collapse
 
bencun profile image
bencun

This low quality, low effort content is killing me.

Collapse
 
climentea profile image
Alin Climente

Welcome to dev.to!

Collapse
 
gitkat profile image
GitKat

"How to save HTML Page into PDF file"

Collapse
 
amircahyadi profile image
Amir-cahyadi

Nice 👍❤️