后端导出PDF

项目环境：

前端：VUE+html2canvas

后端：SpringBoot+ITEXT

之前导出pdf的功能都是在前端导出，或者在后端另外画一套模版，项目组不允许前端导出，担心兼容性问题，并且要求所见及所得，页面本身比较复杂，导致后端使用模版的话工作量会比较大。

经同事推荐使用了html2canvas，这个前台插件可以将前台页面截图，转为base64编码，将值传递到后端。

后端代码为：

传入参数：String pdfBase64Str；
//1---因为框架将请求中的字符串进行了url转义，这里要进行反转义，反转义后为正常的base64字符串
pdfBase64Str = URLDecoder.decode(pdfBase64Str);

BASE64Decoder decoder = new sun.misc.BASE64Decoder();
//将base64转义为byte串
byte[] bytes = decoder.decodeBuffer(pdfBase64Str);
//URLDecoder.decode(item)；
//2---转化成图片
com.itextpdf.text.Image image = Image.getInstance(bytes);
//3---创建了一个文档对象，并设置了尺寸
Document doc = new Document(new RectangleReadOnly(png1.getWidth(),png1.getHeight()));
//pdf画的对象，将文档对象输出到返回头中
PdfWriter
        .getInstance(doc, response.getOutputStream());
doc.open();
doc.newPage();
//这里不知道有什么用，未进行测试
doc.add(new Paragraph(""));
//对齐方式
image.setAlignment(Image.MIDDLE);
//将图片写入pdf页中
doc.add(image);
doc.close();

使用过程中碰到了几个问题，网上没有明确的解答，在这里记录下踩到的坑。

一。base64被进行URL转义，项目中使用微服务架构，不同子工程中有的会自动进行转义，有的不会。因为代码是中途接手的，不知道前边的人对代码做了什么修改。

因为转义中对“+”没有进行转义，所以推测是js对参数进行了转义，没有进行抓包，但是nerwork中发送的参数没有进行转义，所以推测是tomcat进行了转义。

碰到的问题在于，自行转义时使用的是老版本的JS转义，其中“+”没有转义，而“ ”会转义成“+”，反转义的时候会导致转换出的字符串错误。

解决方案：

1.在前端通过“encodeURIComponent”组件对参数进行转义，这个组件转义的结果与java版本相同，传入参数就可以直接进行反转义。

2.属于紧急处理方案，在前台传递参数时将，base64码按位切割，后台使用数组接，这样就不会触发转义，同时因为是按位传值，接收时，可以通过数组中数据位数判断时候进行了转义，再进行反转义。

 

二。前端使用html2canvas进行截图时，这个插件对表格支持不好，会出现表格中排中的竖线不到底的情况。

解决方案是前端意外发现的，border-left：0px将边框设为0px就可以在打印中显示出来