V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
vueli
V2EX  ›  程序员

html 转 pdf 遇到 CSS3 属性丢失问题

  •  
  •   vueli · 219 天前 · 534 次点击
    这是一个创建于 219 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前端将 html 字符串给后端,后端先转为 .html 文件,在调用 wps 的 api 转为 pdf 。

    其中表格中的 word-break: break-all 属性会失效,因为后端在生成 html 文件的时候是没问题的(打开看过),只有经过 wps 的 api 就会出现这个问题。

    这个是 html

    img

    这个是导出 pdf 会出现的情况

    img

    后端说是因为 wps 这个库不支持 css3 的属性,需要前端来改。 我现在前端也改不出所以然。

    这个问题以前是前端调用浏览器打印功能的,新需求是不要用户出现那个页面,要提交的时候直接生成。

    第 1 条附言  ·  219 天前

    解决方案出来了,

    img

    之前的结构是 td 里面放 span span添加 word-break: break-all; 这些属性。 我尝试给td也添加了这个属性,解决这个问题了,感谢各位的解惑,谢谢!!!

    这个是结果的对比图

    img

    NerbraskaGuy
        1
    NerbraskaGuy  
       219 天前   ❤️ 1
    那就手动分割字符串加换行符吧
    jifengg
        2
    jifengg  
       219 天前   ❤️ 1
    看样子楼主不是转 pdf 的开发,那试试定好表格列的宽度呢?

    我们最近也在做 html 转 pdf ,我给定的方案是,用 chromium headless ( puppeteer 或直接命令行调),这样能保证浏览器打印成 pdf 是啥效果,后端生成的 pdf 就是啥效果。
    oneisall8955
        3
    oneisall8955  
       219 天前   ❤️ 1
    曾经后端也用 html 转 pdf ,后端 java 用的是 com.itextpdf/html2pdf 这个库。
    前端全用 table 来做布局。参考: https://pastebin.com/JZbmXvmD?password=v2ex
    jifengg
        4
    jifengg  
       219 天前   ❤️ 1
    刚试了固定宽度貌似不行。
    https://caniuse.com/?search=word-break

    根据文档,IE6 都支持,他不支持有点说不过去。
    实在不行,这个链接还提供两个类似方案:
    <wbr/>:在文本中插入这个标签,可以起到类似效果;
    overflow-wrap:见链接介绍。
    vueli
        5
    vueli  
    OP
       219 天前
    @NerbraskaGuy 动态生成带入的数据
    vueli
        6
    vueli  
    OP
       219 天前
    @oneisall8955 公司都是统一的公共库啥的,我也不懂。能前端解决就前端解决了
    vueli
        7
    vueli  
    OP
       219 天前
    @jifengg #4 我最开始以为是不支持 css3 ,结果发现不是,现在我都不知道什么原因引起的
    yuanchao
        8
    yuanchao  
       218 天前
    我们目前用的是这家,基本上浏览器打开是啥样,生成完就是啥样,但是分页得自己处理。https://www.uscreenshot.com/
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3679 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 04:22 · PVG 12:22 · LAX 21:22 · JFK 00:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.