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

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

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

问题描述：项目中的pdf文件需上传到文件服务器，这会改变原有pdf的文件名，之后在浏览器上预览该pdf时左上角显示了被修改后的名称，经过一番搜索得知，浏览器预览pdf时左上角显示的名称就是pdf文件的标题属性，所以只要在pdf文件上传前修改文件的标题属性即可，因项目原因，选用iText pdf。

iText是著名的开放源码的站点sourceforge一个项目，是用于生成PDF文档的一个java类库。通过iText不仅可以生成PDF或rtf的文档，而且可以将XML、Html文件转化为PDF文件。




因为生成的PDF内还有富文本，后端不好生成PDF，故由前端完成。

1、生成大于30多页时，容易造成生成页面黑屏问题。

  • 原因：canvas生成图片时，对内容高度有一定的限制，超过这个高度，canvas生成不了图片。
  • 解决方案：将html文档中需要生成PDF的部分，不再整个内容生成一张截图，而是根据内容切割成多个具有相同类名的div，生成多张截图。然后循环截图列表，生成PDF。

2、 因为html内容时table包裹的，没有连续一行都是空白的，所以如何判断canvas可以截断

  • 解决方案：遍历循环，如果不是白色的像素点不超过20，可以截断

3、解决了黑屏问题，但是随之，想在一页上添加水印造成了困难。

  • 解决方案：最终生成PDF文件时，遍历每一页PDF，然后将canvas生成的水印于PNG格式，覆盖在每一页PDF上。看了源码才看到jspdf的addImage接口可以传canvas对象，这时候会对图片格式进行确认，然后传PNG格式就可以不覆盖原本的内容了。

页眉、页脚、封面、水印

  • 注意：在本次示例中，因为内容从data中获取，所以在mounted生命周期中调用生成PDF方法。在实际开发中可能是从后台获取的，需要在updated生命周期中调用生成PDF方法。
附件正在生成中...... 附件正在生成中......
  • 因为前端生成会占用内存，所以电脑性能越不好，浏览器越容易崩。有一个同事电脑生成60多页浏览器就卡住了，我测试到生成110多页还可以。所以如果后端同事有更好方案，可以让后端同事来做。

最近做后台系统遇到挺多复杂的需求，比如导出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方法即可。

我要回帖

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

 

随机推荐