javascript - 仅打印点阵打印机中的内容

Question

我们一直在做一个项目，需要使用 JavaScript 打印功能在点阵打印机中打印 html 页面中的内容。我们面临的问题是内容打印后有空格。

页面设置为 A4 / Legal，因为打印内容的高度可能会有所不同，因此无法确定高度。

我们尝试使用以下 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>