css - 如何使用 css 将打印机的页面设置为 A4 尺寸?
问题描述
如何使用 css 将打印机的页面设置为 A4 尺寸?
这是我测试时的代码。您将test
在 2 A4 纸页中看到单词。
但是当我按下Ctrl+p
键盘时,它的显示是这样的。
为什么不打印 2 页。
<style type="text/css">
.A4 {
background: white;
width: 21cm;
height: 29.7cm;
display: block;
margin: 0 auto;
padding: 10px 25px;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
overflow-y: scroll;
box-sizing: border-box;
}
@media print {
.page-break {
display: block;
page-break-before: always;
}
size: A4 portrait;
}
@media print {
body {
margin: 0;
padding: 0;
}
.A4 {
box-shadow: none;
margin: 0;
width: auto;
height: auto;
}
.noprint {
display: none;
}
.enable-print {
display: block;
}
}
</style>
<div class="A4">
test
</div>
<div class="A4">
test
</div>
我能怎么做 ?
解决方案
你有一个.page-break
类,但你没有使用它。
<style type="text/css">
@media print {
body {
margin: 0;
padding: 0;
}
.A4 {
margin: 0;
background: white;
width: 21cm;
height: 29.7cm;
}
.noprint {
display: none;
}
.enable-print {
display: block;
}
.page-break {
page-break-before: always;
}
}
</style>
<div class="A4 enable-print">
test
</div>
<div class="A4 enable-print page-break">
test
</div>
<div class="noprint">
won't be printed
</div>
推荐阅读
- rx-java - fromIterable 之后如何保证订阅的顺序?
- c# - 使用特定数据填充组合框的功能一次不适用于超过 1 个组合框,没有明确的错误
- java - 应用字体中的 Android 操作系统覆盖
- node.js - 如何在节点 js 中等待子查询结果?
- r - 如何使用 GGPlot 绘制两条虚线回归线
- amazon-web-services - 如何使用 AWS CDK 将 Internet 网关添加到 VPC?
- javascript - gulp 构建失败,粉笔版本:3.0.0
- html - 无论路径如何,图像都不会显示
- ruby-on-rails - 在 Ruby on Rails 上设置选择标签
- python - 非空约束失败。Django Models-Postgres 相同的错误 null=True 与 null=False