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

[vueli]

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

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

这个是 html

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

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

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

[NerbraskaGuy]

那就手动分割字符串加换行符吧

[jifengg]

看样子楼主不是转 pdf 的开发，那试试定好表格列的宽度呢？

我们最近也在做 html 转 pdf ，我给定的方案是，用 chromium headless （ puppeteer 或直接命令行调），这样能保证浏览器打印成 pdf 是啥效果，后端生成的 pdf 就是啥效果。

[oneisall8955]

曾经后端也用 html 转 pdf ，后端 java 用的是 com.itextpdf/html2pdf 这个库。
前端全用 table 来做布局。参考： https://pastebin.com/JZbmXvmD?password=v2ex

[jifengg]

刚试了固定宽度貌似不行。
https://caniuse.com/?search=word-break

根据文档，IE6 都支持，他不支持有点说不过去。
实在不行，这个链接还提供两个类似方案：
<wbr/>：在文本中插入这个标签，可以起到类似效果；
overflow-wrap：见链接介绍。

[vueli]

@NerbraskaGuy 动态生成带入的数据

[vueli]

@oneisall8955 公司都是统一的公共库啥的，我也不懂。能前端解决就前端解决了

[vueli]

@jifengg #4 我最开始以为是不支持 css3 ，结果发现不是，现在我都不知道什么原因引起的

[yuanchao]

我们目前用的是这家，基本上浏览器打开是啥样，生成完就是啥样，但是分页得自己处理。https://www.uscreenshot.com/