请教一个关于网页 A3 尺寸排版的问题,这种需求 css+html 能实现么

2020-01-08 16:42:59 +08:00
 Exceptionluo

网页实现 A3 纸试卷排版的问题
A3 纸高度是固定的
https://imgchr.com/i/l2K11I
图一是已经实现的效果:直接文档流的方式顺序排版,但是这样打印出来排版还是不对
https://imgchr.com/i/l2KMhd
图二是理想中的样子:但是这个排版现在想不出该怎么实现,A3 纸的第一面 A 面左右各 50%宽度左右排版 排满页面后 自动排版到 A3 纸的第二面 B 面
https://imgchr.com/i/l2KJnf
图三是原始的文档流:后台丢过来的数组,前端进行循环渲染

2360 次点击
所在节点    HTML
4 条回复
temporary
2020-01-08 17:40:46 +08:00
izoabr
2020-01-08 18:04:31 +08:00
CSS 里有个 media,值是 print 得时候单独设置。
izoabr
2020-01-08 18:06:13 +08:00
https://github.com/delight-im/HTML-Sheets-of-Paper
还有好多现成的

```
@page {
size: A4;
margin: 0;
}

@media print {
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
```
Exceptionluo
2020-01-09 11:20:44 +08:00
@temporary 根据你的 demo 测试了下 现在还存在些问题<br>
https://jsbin.com/doyeqebovo/edit?html,css,js,output <br>
1、一旦设置了 A3 后没法选择横向打印<br>
2、随着文档越来越多 打印预览发现 边距的间隔越来越大<br>
https://imgchr.com/i/lRXMSs<br>

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/636207

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX