I would like to create a button using only HTML, to print the web page just as the way it appears on the browser.
But this basic code prints even the hidden blocks.
<a class="print-page" href="javascript:window.print()"><i class="fas fa-print"></i> Print This Page</a>
Could someone help me please!
Here The button generates this pdf with above code.
but the problem, it takes the whole body of the page, which has blocks hidden for computers but visible for mobile phones.
It is printing all the body including hidden blocks.
like in this below screen shot, this are normally hidden blocks for computer browsers.
I solve this problem by including some #media print rules in a stylesheet.
.print-only{
display: none;
}
.screen-only{
display:block;
}
#media print {
.print-only{
display: block;
}
.screen-only{
display:none;
}
.something1,
.something2 {
display:none;
}
}
Related
I have requirement to print html page in A4 dimension, plus I want to print content body print along with css, html and ignore menu list, header, footer and page right-side menu list.
To start with this, I have introduce simple div and class noprint and add this in #media print but its seems not working. noprint class works outside the #media print so I know its correct.
Also my requirement is to print directly from browser using standard Ctrl+P keyboard option
<style type="text/css">
.standardStyle {
display:block;
width:200px;
height:150px;
padding:10px;
background-color:green;
margin:5px;
}
#media print{
.noprint{ color:red;}
}
</style>
</head>
<body>
<div class="noprint standardStyle">
this is test line....
</div>
<div class="print standardStyle">
this is test line....
</div>
<div class="print standardStyle">
this is test line....
</div>
Run the snippet and hit Ctrl+P , you will see the line in red colour.
Screenshot :
#media print {
.noprint { color:red; }
}
<div class="noprint">
this is test line.....
</div>
Most browsers do NOT print background colors and background images by default. I suppose you are missing the green background - this is the reason for it.
Usually this can be acitvated in the browser's print dialog, but to force a background to be printed you can only try adding !important to the settings that don't appear properly in print.
#media print
{
.noprint{
display: none !important;
}
}
Im working on a project for a family friend and I have run into an issue while printing a table it tunicates all the data but one page. This seems to be the case in all the browsers that i have tried (Chrome, Firefox, Safari) The Table is set up in a div (table-stuff in the example code) that has the overflow set to auto then the print css sets the overflow to visible (This is what i have found to do when searching for the problem) and hides all the other elements with a no-print class. Its set up as the following
<main>
<div class='grid'>
<div class='contents'>
<div class='table-stuff>
<table> Lots of data in table</table>
</div>
</div>
</div>
</main>
Print CSS:
.no-print {
display: none !important;
}
.table-stuff {
overflow: visible !important;
float: none !important;
}
Any help would be appreciated and if any other info is needed I'd be happy to provide. Thank You in advance
So I was able to get it to print correctly and it was because of google material design lite causing the issue. I still am trying to find what style was causing the issue though.
Try creating a #media in your css file. I would do something similar like this:
#media print {
table.no-print {
display: none;
}
}
As far as I understand in HTML5, you should only have one header tag and one footer tag in a document (or at least in a section). But what if you want one footer to appear on screen and a different one to appear when printing. As far as the HTML is concerned, you are adding two footers together, even though only one would appear at a time.
Would screen readers, for example, ignore the print version?
One way of doing this is to put two sections in each, one to be displayed on screen (.noprint) and the other to be displayed for print (.print). Display .noprint as you would and set .print to display none except for when being printed using an '#media print' query.
like this:
<header>
<div class="noprint">
<p>stuff for screen only goes here</p>
</div>
<div class="print">
<p>stuff for print only goes here</p>
</div>
</header>
<style>
.print {
display: none;
}
#media print {
.print {
display: inherit;
}
.noprint {
display: none;
}
}
</style>
Also, to answer your question about screen readers: they usually will not read an element set to display:none and I believe that to be true in this case. Here's a more comprehensive guide on how screen readers deal with display:none:
http://juicystudio.com/article/screen-readers-display-none.php
good luck!
Not referring to the URL at top of page.
When an <a> tag is printed in Chrome, it shows the URL after it.
Instead of just showing the anchor text (like this: StackOverflow)
It shows the anchor text w/ URL after it
(like this: StackOverflow (window.open('www.stackoverflow.com'))
This makes the printed page stretch off the printable area, and I'm trying to avoid this from happening. Can this setting be disabled somehow in printing mode or is there a #media print style that can be defined to remove this URL part from print screen?
Tell it not to print anything after the anchor tag.
#media print {
a:after { content:''; }
a[href]:after { content: none !important; }
}
Simply use this,
<style type="text/css" media="print">
#page {
size: auto; /* auto is the initial value */
margin: 0; /* this affects the margin in the printer settings */
}
</style>
I have a page with multiple scrolling slides inside a pane. Whenever I try to print the second slide, it always prints the first one which is loaded when user first visit the site. Is there any print function in Javascript or JQuery, which allows me to print slides which wasn't loaded first or even the contents that is visible to the user?
Have you looked at #media print { } and #media screen { } in CSS?
The first will be implemented when printing, the 2nd will be implemented on screen.
Purely as an example...
#media print {
#myDiv { overflow : auto; }
}
#media screen {
#myDiv { overflow : scroll; }
}