最近要搞前端html转pdf的功能。折腾了两天,略有所收,踩了一些坑,所以做些记录,为后来的兄弟做些提示,也算是回馈社区。 这篇文章说了啥
正文通过打印预览实现介绍通过打印预览来实现导出pdf并不是什么稀奇事,一般浏览器(Chrome)在页面手动 程序中实现这个则要靠下面这个方法来实现:
当然能导出PDF只是主要需求,我们还有一些其他的需求
这些需求通过在对css中
更多的设置可以参考:CSS 打印 最佳实践需要提醒的是:如果要改变原有样式,最好是在元素上
打印时候要把这个字体大小设置成18px的话,我们不能这么写
这样写试不起作用的。想要生效得在元素上新加一个class类写
经过实践,这样写才可以生效。 库或者插件有人可能觉得这样写略有麻烦,别担心,总有人会让麻烦的事情变得简单,这个人如果不是你,那就一定是他。
评价这种方法前端实现,灵活简单,而且在 通过jsPdf实现介绍jsPdf是一个可以把html转成pdf的插件,有人多人在用。但是吧,老外做的很多东西没考虑过英文之外的语言(这个可以理解,我要做个啥肯定也是做成中文的,我才不考虑啥日语英语阿拉伯语呢),这个东西也不例外的不支持中文,那咋办呢,很多兄弟想了办法: 曲线救国 | html2canvas + jsPdf既然你不支持中文,劳资也懒得跟你废话,劳资我把页面转成图片,怕不怕,图片再导出PDF照样中!这种方式很常见、很省事,问题也很多图片拉伸、模糊,最重要这样导出的PDF是没有灵魂的,因为他里面的内容都是图片,不能复制。因为没有灵魂,所以我没有采用这种方法,如果你喜欢这种可以参照这篇文章Javascript 将html转成pdf,下载,支持多页哦(html2canvas 和 jsPDF),写的很详细。 硬生生支持 | jsPDF-CustomFonts-support既然你不支持其他语言是吧,那我写个插件出来搞到你支持为止。干这活儿的是一个来自韩国的哥们儿,他写一个可以支持其他语言的插件jsPDF-CustomFonts-support。原理大概就是利用把你提供的字体文件转成base64格式,然后做成一个js文件,拿这个js文件当做字库。恩,我喜欢这种强上的做法。而且这样导出的pdf内容是可以复制的,简直惊喜。于是,我采用了这样的方式。 最佳实践挂几个里面遇到的比较坑的错误
虽然文档页面打不开,但是在他的github仓库里是有
demo的实现都在这个
然后
这个错误是
这个错误是在
这个问题我找不到原因,但是我找到了一个方法: 隐藏掉thead,通过在tbody中将第一排tr设置样式来模拟thead。实现如下:
评价
后端导出pdf
参考https://segmentfault.com/a/11... |