We have been working on a project where the contents in the html page needs to be printed in the dot matrix printer using a JavaScript print function. The issue we are facing is that there is blank space after the contents are printed.
The page settings is A4 / Legal as there cannot be a definite height since the height of the contents printed may vary.
We have tried using the following CSS:
.page-break {
display: none; /**Added only this on 18-12-2018*/
page-break-after: always;
}
html {
height: 99%;
}
##media all {
.page-break {
visibility: hidden;
}
}
##media print {
body * {
display: none;
height: 0;
}
}
You can try adding space between ## and media like so ## media. There is a bug like that with .NET Razor.
You could also use #page to manipulate margins, size and page breaks.
MDN: The #page CSS at-rule is used to modify some CSS properties when printing a document. You can't change all CSS properties with #page. You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.
Or you can also try this
<style type="text/css">
.page-break {
display: none; /**Added only this on 18-12-2018*/
page-break-after: always;
}
html {
height: 99%;
}
</style>
<style type="text/css" media="all">
.page-break {
visibility: hidden;
}
</style>
<style type="text/css" media="print">
body * {
display: none;
height: 0;
}
</style>
Related
How can I remove the scrollbar while I print report in Chrome Browser.
Here is my code:
<style>
#media print {
#page {
size: A4 portrait;
margin:1cm;
}
</style>
Here is the picture:
This is the solution I found:
#media print{
#page {
size: A4 portrait;
margin:1cm;
}
::-webkit-scrollbar {
display: none;
}
}
overflow: hidden is the css property you are looking for. It removes the scrollbar and removes overflowing content. See: https://developer.mozilla.org/en/docs/Web/CSS/overflow
<style>
#media print{
#page {
size: A4 portrait;
margin:1cm;
overflow: hidden;
}
}
</style>
Or try to set the overflow hidden without depending on the media query:
html { overflow: hidden; }
If this does not help for printing, maybe have a look at the answer of following question: How to hide the scroll bar and with the content ramaining scrollable?
As mentioned there you could try to set the width of the scrollbar to zero for webkit browsers.
I want to print from the second to second-last page in browser,
how can I specify the range before calling window.print(); from javascript.
This is my style for media print
<style type="text/css" media="print">
.pageBreak
{
page-break-before: avoid;
page-break-after: avoid;
page-break-inside: avoid;
height: 100%;
}
#page {
size: landscape;
}
</style>
Thanks
Hope this would help you
Java Script
var content = document.getElementById(“mycontenttoprint");
var printer = document.getElementById(“printiframe").contentWindow;
printer.document.open();
printer.document.write(content.innerHTML);
printer.document.close();
printer.focus();
printer.print();
HTML
<iframe id="printiframe" style="height: 0px; width: 0px; position: absolute"></iframe>
Please let me know if you face any troubles.
GOAL: Eliminate redundancy in the initial DOM by implementing reusable JS (or ASP ?).
In this example I want to write some JS to 'bump' the contents of div # id loc-A to the div # id loc-B, without having to have the exact same code written in two places on the page.
I'm just not sure where to start...?
I have been able to accomplish this with CSS quite easily, but with redundant code. The more a div element contains, the longer the load.
Here is my codepen example:
See the Pen redundant_panda by rorschaff (#rorschaff) on CodePen.
<html>
<head>
<style>
#media screen and (min-width: 861px) {
div[id^="loc"] img {
width: 100%;
}
#loc-A {
display: initial;
}
#loc-B {
display: none;
}
}
#media screen and (max-width: 860px) {
div[id^="loc"] img {
width: 50%;
}
#loc-A {
display: none;
}
#loc-B {
position: relative;
top: 250px;
display: initial;
}
}
</style>
</head>
<body>
<div id="loc-A">
<img src="http://bit.ly/1TAzmvg"/>
</div>
<!----- Down the page somewhere ----->
<div id="loc-B">
<img src="http://bit.ly/1TAzmvg" />
</div>
</body>
</html>
I feel like there's something missing in this, but here's how I would address the code provided.
#media screen and (min-width: 861px) {
div[id^="loc"] img {
width: 100%;
}
}
#media screen and (max-width: 860px) {
div[id^="loc"] img {
width: 50%;
}
#loc-A {
position: relative;
top: 250px;
}
}
#loca-A {
display: initial;
}
And just get rid of the other div.
You could also address this via a responsive framework (bootstrap, foundation) or really, a number of different ways. I think the better approach would be to think about what problem you are solving and how you are solving it. If you find yourself using the same code repeatedly, then maybe your how needs to be revisited.
I need to print a div, for this I'm hiding everything else, but on IE8 (on IE11 too) my div is printed on 22pages! (or less depending on the page behind). I'm making all other stuff invisible and reducing the height of the body but it doesnt help.
<body>
<div id="wrapper">
<div class="loading">more divs/p's/whatnots</div>
<div class="navigation">more divs/p's/whatnots</div>
<div class="page">more divs/p's/whatnots</div>
<div class="nav-buttons">more divs/p's/whatnots</div>
<div class="certificate">more divs/p's/whatnots</div>
</div>
</body>
This is my media=print style
body {
height: 100px !important;
overflow: hidden !important;
}
body * {
visibility: hidden;
}
.certificate * {
visibility: visible;
}
I can't do display:none; in the body * as this includes the certificate div (and it's content) so there is no easy way to restore it in .certificate *.
What else I could do to print it without a hassle on IE?
EDIT so far the only working solution is to use display:none; but so I don't have to restore it I'm applying this not to body * but to more specific paths e.g. body .page *, body #wrapper * but in a way so I don't "hide" certificate (thus don't have to restore it). If there is a better more flexible way to do it, I'm all ears.
EDIT2 also I could do body #wrapper > * to hide all children of #wrapper but not going any further, then just body #wrapper .certificate to restore display property works
body #wrapper > *
{
visibility: hidden;
display: none;
}
body #wrapper .certificate {
visibility: visible;
display: table;
}
I am using this code to print a specific div
CSS
<style type="text/css" media="print">
* {
display:none;
}
#printportion {
display:block;
}
</style>
Script
<script>
var printCalender=function () {
setTimeout(window.print, 1500);
}
</script>
When I run my page in google chrome, the print preview window is blank and shows 'print preview failed'
The issue is that regardless of where your targeted element is positioned in the DOM, your * selector will match any and all parents it has (including <html> and <body>) so the element will never be shown.
See the below example:
* {
display: none;
}
#showme {
display: block;
}
<div id="showme">This will never be shown</div>
As Nit said the problem is with your * selector. You can use one selector with #media print like this:
#media print {
body.print-element *:not(.print) {
display: none;
}
}
Here you have a working example where you can print any clicked element and/or the entire normal HTML document:
function print_this(elem) {
document.body.classList.add('print-element')
elem.classList.add('print')
window.print()
document.body.classList.remove('print-element')
elem.classList.remove('print')
}
document.querySelectorAll('div').forEach(elem =>
elem.onclick = () => print_this(elem))
div {
display: inline-flex;
width: 200px;
height: 200px;
justify-content: center;
align-items: center;
background-color: #e9a9c7;
color: #39464e;
cursor: pointer;
}
#media print {
body.print-element *:not(.print) {
display: none;
}
}
<div>Print 1</div>
<div>Print 2</div>
Note: if you cannot see colors remember to click Background Graphic (Chrome) or similar in your print options.