【项目印象深】将页面内容生成固定样式的PDF文件

记录一下之前项目中遇到的问题，因为一开始尝试了多种前端的方式解决问题未果导致开发时纠结了较长时间，故自己印象比较深刻。

当时项目中客户有一个需求，是需要查看人员的相关信息并按固定的文件样式转为pdf文件提供下载。项目中原先使用的是js的 html2canvas + jsPDF来实现这个功能。[这块网上都有很多教程，比如《html/jsp导出pdf格式的几种方法（jsPDF，iText，wkhtmltopdf）》]

这里说一下我了解到的html2canvas和jsPDF， html2canvas能够实现在用户浏览器端直接对整个或部分页面进行"截屏"。这个html2canvas脚本通过遍历页面DOM结构，收集所有元素信息及相应样式，渲染出canvas图片。而基数PDF可以利用该canvas图片生成pdf文件。

html2canvas和jsPDF的使用也比较简单，只需要在浏览器脚本文件中引用后，即可在客户端直接完成页面内容转为pdf的需求。

但客户对于生成的pdf文件并不满意，提出清晰度和样式均较为逊色，要求优化，经查看发现主要原因还是在于使用html2canvas生成的图片本身清晰度确实较差，且页面内容一旦需要分页则可能出现边框等偏移问题，造成实际产生的pdf文件和客户要求有出入。

因为没有专业的前端大佬，几个后端小菜只能在网上査各种html2canvas优化清晰度以及分页的办法，但多次调整均未能达到客户要求，这里要说明一下，因为没有前端大佬指导，网上又有很多不同的人说法迥异甚至对立，有些说html2canvas这个清晰度问题没得救，有些说调优后解决了问题，关于这个，我因为安装说解决了问题的人的教程操作没有达到预期效果，所以并不敢说到底能不能完全通过前端的html2canvas设置来解决这个问题。

最终，我们选用了后端的iText来生成pdf文件解决了客户需求。

引入相关依赖jar包后，iText有直接将html转化为pdf的方法提供，我了解到的主要有2个方法：

1、直接将静态html转化为pdf

String inputFile = "F:/xxxx.html";

String url = new File(inputFile).toURI().toURL().toString();

OutputStream os = new FileOutputStream("F/xxxx.pdf");

ITextRenderer renderer = new ITextRenderer();

renderer.setDocument(url);

2、通过java动态生成html再转化为pdf

ITextRenderer renderer =new ITextRenderer();

renderer.setDocumentFromString(content);//content为java动态生成的html页面字符串

转化后需要注意中文支持问题

if ("linux".equals(System.getProperty("os.name").toLowerCase())) {//获取当前服务器的系统，并设置字体（宋体）

fontResolver.addFont("/usr/share/fonts/chiness/simsun.ttc", BaseFont.IDENTITY_H, BaseFont.EMBEDDED);

}else {

fontResolver.addFont("c:/Windows/Fonts/simsun.ttc", BaseFont.IDENTITY_H, BaseFont.NOT_EMBEDDED);

}

该方法生成的pdf文件并不存在清晰度问题，而且由于整个文件由html页面生成，而简单样式的html页面对于后端人员来说也并不是很难控制，最终该问题得到解决。

最后编辑于：2020.07.13 12:03:04