Thank you so much 🙏. Very useful tutorial. I spent days researching how to generate a pdf. I came across tutorials for JSPDF, Html2pdf,... all of them didn't work. But your solution is so much and power! For those who would like to add margins to pages to prevent text from sticking to the borders: @media print { @page { margin-top: 10mm; margin-bottom:10mm; } }
I think this is actually being added by your system/browser, not JavaScript or CSS. To remove these, you can go to the print preview settings. I managed to removed them by disabling header and footer.
Hard for me to diagnose without seeing your code but maybe this source code will help you: openjavascript.info/2022/05/17/printing-a-page-or-part-of-a-page-using-javascript/
This cannot be done with JS as the window.print() function does not accept any arguments where you could specify options. However, you can do it with CSS by setting a size value for the page: @page { size: A4; } This solution works in all major browsers except Firefox. For Firefox, I'm not sure a workaround exists unfortunately. But if you find one, be sure to post here as maybe it would be useful to someone else.
@@OpenJavaScript It seems that @media print only works on chrome but not in other browser for me I tried to set width and height to 100% and display none for header and footer but then again it all works on on chrome, can you upload a tutorial on how to do it though?
Set the button to not be displayed inside the print media media query as in the code below OR place the button somewhere else in the DOM that is outside the print-area: @media print { #printBtn { display: none; } body * { display: none; } .print-area, .print-area * { display: block; } }
Thanks for the feedback. I've just posted the source code and a live working version on my blog. Maybe this helps you out: openjavascript.info/2022/05/17/printing-a-page-or-part-of-a-page-using-javascript/
@@OpenJavaScript My comment to know that I watched this video Do not watch it again I love javascript and your dedicated channel May God reward you for your content And please organize playlists
Thank you so much 🙏. Very useful tutorial. I spent days researching how to generate a pdf. I came across tutorials for JSPDF, Html2pdf,... all of them didn't work. But your solution is so much and power! For those who would like to add margins to pages to prevent text from sticking to the borders:
@media print {
@page {
margin-top: 10mm;
margin-bottom:10mm;
}
}
Cheers for this, made it seem so easy!
Bro the video was very informative
I didn't know the concept of print function but you clarified my concept
Thanks, Great bro 👍🏻
Thanks for watching!
👉 Source code and live working example: openjavascript.info/2022/05/17/printing-a-page-or-part-of-a-page-using-javascript/
Uff... Men, resolviste mi dolor de cabeza en 5 minutos... jeeje... Gracias...
De nada, estoy feliz que podria ayudarte :)
thanks bro, how to print but including css settings to, as padding, color etc ?
omg i love u man... you're my hero!!!
Glad you liked the video 😃
Thanks A lot !! This video was very helpful
You're welcome, glad it helped, thanks for reaching out!
great video, helped me a lot! thank you
That's great to hear, glad you found it useful. Thanks for reaching out to let me know!
i have a problem for this method, in input radio type, it thus not get if it is selected or not
now how do you remove the date and time, and your name above the printing area?
I think this is actually being added by your system/browser, not JavaScript or CSS.
To remove these, you can go to the print preview settings. I managed to removed them by disabling header and footer.
How do you print body background image ?? I need to learn it for my computer class --
You could try setting the printing area to the background image:
@media print {
body {
content:url(imgs/bg.png);
}
}
I placed the code in a Wordpress Admin Dashboard to test printing. It returned a blank page.
انا استخدم نفس الخاصية ولكن احتاج الى جعل الخصائص يتغير عندا استخدام الهاتف اتناء فتح نافدة الطباعة
not working for me
even after writing display: block code for the area to be printed, print preview is displaying blank page
Hard for me to diagnose without seeing your code but maybe this source code will help you:
openjavascript.info/2022/05/17/printing-a-page-or-part-of-a-page-using-javascript/
@@OpenJavaScript visibility property worked for me instead of display. Thanks for your reply
@@geetikarijhwani4628 Glad you found the solution! Good luck.
@@geetikarijhwani4628 it did not work for me do u have any similar problems like this i click on print and nothing happens
Bro i want to skip preview step directly make print how can i make
thank you very much
Thank you 👍👍
You're welcome 😊
how can i print the backgroundcolor too?
Try adding the following CSS to the print view:
.print-area {
background-color: red;
-webkit-print-color-adjust: exact;
}
it did not work for me i do not know why? this is my code clikc on reply to see it
Not working showing blank page in print preview
This worked for me not exactly but it worked
What was the issue?
Always happy to look into these and update if needed...
How to change paper size using js?
This cannot be done with JS as the window.print() function does not accept any arguments where you could specify options.
However, you can do it with CSS by setting a size value for the page:
@page {
size: A4;
}
This solution works in all major browsers except Firefox. For Firefox, I'm not sure a workaround exists unfortunately. But if you find one, be sure to post here as maybe it would be useful to someone else.
Thank you for the video
Welcome!
how to new page on div
If you want to set the content of a page to appear in a div like this:
can anyone explain me #content, #content * thing?
How to print scrollable div?
If you haven't already, you could try setting the following inside @media print {}
{
#scrollableDiv{
width: 100%;
height: 100%;
}
@@OpenJavaScript How about how to remove header and footer, if found the solution on chrome but not in other browser like Mozilla, Edge etc?
@@raymarkado2526 I would not remove anything from the page but set the header and footer CSS display value to none inside @media print{}.
@@OpenJavaScript It seems that @media print only works on chrome but not in other browser for me I tried to set width and height to 100% and display none for header and footer but then again it all works on on chrome, can you upload a tutorial on how to do it though?
how about ios
vs code font name
Consolas lol
how to remove the print button from printable
Set the button to not be displayed inside the print media media query as in the code below OR place the button somewhere else in the DOM that is outside the print-area:
@media print {
#printBtn {
display: none;
}
body * {
display: none;
}
.print-area, .print-area * {
display: block;
}
}
@@OpenJavaScript thnx a lot
@@drakhellfallen6365 Welcome!
thanks bro
Welcome!
If you want color, add this:
-webkit-print-color-adjust: exact;
it doesn't work
Thanks for the feedback.
I've just posted the source code and a live working version on my blog. Maybe this helps you out:
openjavascript.info/2022/05/17/printing-a-page-or-part-of-a-page-using-javascript/
@@OpenJavaScript thank you!! it's working now ;)
اااااا
Not sure how to respond 😂
@@OpenJavaScript My comment to know that I watched this video
Do not watch it again
I love javascript and your dedicated channel
May God reward you for your content
And please organize playlists
@@mohamadalkhalafalbarho5841 Organized playlists coming soon!