1

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;
    }
}
cHao
  • 84,970
  • 20
  • 145
  • 172
Phoenix
  • 37
  • 1
  • 3

1 Answers1

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>
Daut
  • 2,537
  • 1
  • 19
  • 32
  • Is there any other way where in the printing stops once the contents are printed instead of wasting the whole sheet of paper, irrespective of the page size selected in the print properties – Phoenix Jan 14 '19 at 13:37
  • @Phoenix I can't understand your question. Maybe edit the question and add it there. Make a clear example :) – Daut Jan 14 '19 at 13:41
  • I am trying to print an invoice using the window.print() function of Javascript. The Print Preview doesn't show any blank spaces but the printed invoice has a space of 1 inch before the content is printed and also leaves a lot of blank space after the content is printed. To avoid the wasting of paper after content is printed, I have set the paper size to 8*6" in the printer paper settings.But the 1" space before the content remains the same. – Phoenix Jan 15 '19 at 13:06
  • @Phoenix Maybe you need something like `@page { margin:0cm; }` Let me know if that works :) – Daut Jan 15 '19 at 13:38
  • the above code did help in partially reducing the space. – Phoenix Jan 18 '19 at 14:06
  • @Phoenix did you try negative `margin`, that might reduce it further – Daut Jan 18 '19 at 14:17