求助前端生成的网页, 打印的时候当前页空间不足图片会被挤到下一页

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Vue.js

这是一个创建 1496 天前的主题，其中的信息可能已经有所发展或是发生改变。

我想做到打印的时候空间不足就分割图片
https://codesandbox.io/s/wandering-forest-9sszg 这是最小化代码
https://imgtu.com/i/oAhI10 这是图片被挤下来的错误

打印

图片

不足

分割

5 条回复 2021-11-26 09:41:34 +08:00

liiihhhh

2021-11-25 23:50:25 +08:00

我试了一下,貌似 Chrome 主动的为 img 分页.
用`background-image`能实现你想要的效果
https://codesandbox.io/s/laughing-fermat-p18sv?file=/src/components/HelloWorld.vue

Opportunity

2021-11-25 23:51:53 +08:00

`background-image + `-webkit-print-color-adjust: exact;` 吧。。。

page-break-* 的属性只有避免分页的没有强制分页的。。。你的需求太奇怪了，正常来讲应该是在 `.content` 上应用 `page-break-inside: avoid;`

xpyusrs

2021-11-26 00:38:33 +08:00

@liiihhhh 兄弟问一下这个点打印后背景图不显示怎么解决

xpyusrs

2021-11-26 00:43:19 +08:00

@Opportunity 刚试了 page-break-inside: avoid; 实际.content 里面的 item 数量可能多个, 那样会很长, page-break-inside: avoid;的话有些打印出来的纸会留很多空白

liiihhhh

2021-11-26 09:41:34 +08:00

@xpyusrs https://imgur.com/a/3Ig22UP 打印的时候选中背景图片选项