Itext生成PDF字节流传到前端，前端通过PDFJS预览PDF，但是页面是空白的，无内容？请问是什么情况？

来源：蜘蛛抓取(WebSpider) 时间：2022-10-03 08:02 标签： pdf预览在哪里

最近要搞前端html转pdf的功能。折腾了两天，略有所收，踩了一些坑，所以做些记录，为后来的兄弟做些提示，也算是回馈社区。
经过一番调(sou)研(suo)发现html导出pdf一般有这几种方式，各有各有优缺，下面简单介绍。

通过打印预览来实现导出pdf并不是什么稀奇事，一般浏览器(Chrome)在页面手动Ctrl + P都能将当前页进行打印预览。在打印预览的时候我们更改打印方式，选择将页面保存为PDF即可实现页面保存为PDF的功能。
比如此时我进行Ctrl + P就可以看到这个功能。

程序中实现这个则要靠下面这个方法来实现：

这个问题我找不到原因，但是我找到了一个方法: 隐藏掉thead，通过在tbody中将第一排tr设置样式来模拟thead。实现如下：

jsPDF-CustomFonts-support的方法虽然质量上占优势，但那个字体文件动辄好几兆，甚至十几兆，这对于前端来说是一个不小的开销，对性能影响太。
此外，这两种方式导出PDF都是点一下导出就会下载文件的，不需要用户再次确认下载，这点用户体验还是比较好的。

iText、wkhtmltopdf、prince这三个都是后端生成pdf的工具。这三个都没有node api。故不多说。想看具体的比较可以参考这篇文章。


最近做后台系统遇到挺多复杂的需求，比如导出pdf，word，excel

一般这种需求后端如果存文件，然后传个流过来，前端就可以下载导出了。

但是如果后端不存文件，只返回字符串(富文本字符串)，这时候咋办？

= =不知道，但是我遇到了，也只能头铁干了。

路还是有的，讲一下实现方式：

具体需求是在弹窗内预览，然后点击下载可以生成对应pdf，预览pdf如果后端没有给文件地址，只返回富文本字符串(类似"

")，比较难做，但是办法还是有的,个人感觉难点在于html2canvas生成完整截图的时机和pdf的分页。

思路：由于pdf不可直接编辑，个人思路是先将html截屏转化成图片，再把图片嵌入生成pdf。

控制pdf页面大小取决于html2canvas截图dom的样式，例子中是 .preview-data 这个类,可以观察其中的css样式，其中z-index为负一的原因是html2canvas截图只能截可视dom元素，如果display：none或者是克隆出来的虚拟dom，都截不了，所以只能采取让元素看不见的方法来取巧。

由于后台返回的是富文本字符串，所以渲染的内容代码用innerHTML赋值了，赋值后dom还未渲染，此时不能立即使用html2canvas截取，需要等dom更新完成再截取，这就是调用/weixin_/article/details/

4.预览和下载pdf：jspdf很强大，有一个output('datauristring')的方法，可以生成一个dataurl外链，把它带给iframe标签或者embed标签src就可以在线预览(后台直接返回pdf地址也是这种方法预览)，下载则更为简单，调用save方法即可。

不过在使用HTML2canvas把jsp页面转成图片的时候会在图片上出现一些奇怪的函数

原理：html2canvas库的工作原理并不是真正的“截图”，而是读取网页上的目标DOM节点的信息来绘制canvas，所以它并不支持所有的css属性（像上面的截图的红圈中就有复选框没有显示出来）。

其实在前端就可以把页面转成pdf的格式了，如果你需要在后端进行转pdf,就需要把图片的base64编码传到后台就行了（上面代码里有写）

我要回帖

更多关于 pdf预览在哪里 的文章

 

随机推荐