V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xpyusrs
V2EX  ›  Vue.js

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

  •  
  •   xpyusrs · 266 天前 · 1249 次点击
    这是一个创建于 266 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我想做到打印的时候空间不足就分割图片
    https://codesandbox.io/s/wandering-forest-9sszg 这是最小化代码
    https://imgtu.com/i/oAhI10 这是图片被挤下来的错误
    5 条回复    2021-11-26 09:41:34 +08:00
    liiihhhh
        1
    liiihhhh  
       266 天前
    我试了一下,貌似 Chrome 主动的为 img 分页.
    用`background-image`能实现你想要的效果
    https://codesandbox.io/s/laughing-fermat-p18sv?file=/src/components/HelloWorld.vue
    Opportunity
        2
    Opportunity  
       266 天前
    `background-image + `-webkit-print-color-adjust: exact;` 吧。。。

    page-break-* 的属性只有避免分页的没有强制分页的。。。你的需求太奇怪了,正常来讲应该是在 `.content` 上应用 `page-break-inside: avoid;`
    xpyusrs
        3
    xpyusrs  
    OP
       266 天前
    @liiihhhh 兄弟问一下这个点打印后背景图不显示怎么解决
    xpyusrs
        4
    xpyusrs  
    OP
       266 天前
    @Opportunity 刚试了 page-break-inside: avoid; 实际.content 里面的 item 数量可能多个, 那样会很长, page-break-inside: avoid;的话有些打印出来的纸会留很多空白
    liiihhhh
        5
    liiihhhh  
       266 天前
    @xpyusrs https://imgur.com/a/3Ig22UP 打印的时候选中 背景图片选项
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2574 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 130ms · UTC 12:01 · PVG 20:01 · LAX 05:01 · JFK 08:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.