Printing only contents in dotmatrix Printer

Question

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;
    }
}

Answer 1

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>