javascript - 仅打印点阵打印机中的内容
问题描述
我们一直在做一个项目,需要使用 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;
}
}
解决方案
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>
推荐阅读
- php - 如何使用关系软删除
- excel - 将值从单元格转换为 VBA
- ios - 通过 API 向 iOS 发送 FCM 消息时无法更改徽章编号
- python - 我正在使用 Python 3.7 和 BS4 进行网络抓取,有一个问题我无法解决,希望有人知道如何解决这个问题
- r - R:ggplot2 绘制 1 个组合箱线图,而不是 2 个类别的 2 个图
- arrays - 如何在角度 6 中将选定的(来自 homeComponent 的引导卡)传递给另一个组件(favourtiesComponent)?
- reactjs - 如何在反应中(同时)更改状态的多个属性?
- c# - 如何通过 InvokeHelper 将 variant* 传递给 C#?
- java - Servet - 为什么我得到空指针异常?
- javascript - 在导航上刷新 Vue 组件