【工作·学习记录】html页面转为pdf

实现步骤

将页面转为图片形式 并传输

首先引入 html2canvas.js

html2canvas(document.body, { //截图对象
     //此处可配置详细参数
     onrendered: function(canvas) { //渲染完成回调canvas
       canvas.id = "mycanvas"; 
       // 生成base64图片数据
       var dataUrl = canvas.toDataURL('image/png');  //指定格式，也可不带参数
       var formData = new FormData(); //模拟表单对象
       formData.append("imgData",convertBase64UrlToBlob(dataUrl)); //写入数据
       var xhr = new XMLHttpRequest(); //数据传输方法
       xhr.open("POST", "../bulletin/exportPdf"); //配置传输方式及地址
       xhr.send(formData);
       xhr.onreadystatechange = function(){ //回调函数
       if(xhr.readyState == 4){
           if (xhr.status == 200) {
            var back = JSON.parse(xhr.responseText);
            if(back.success == true){
            alertBox({content: 'Pdf导出成功！',lock: true,drag: false,ok: true});
            }else{
            alertBox({content: 'Pdf导出失败！',lock: true,drag: false,ok: true});
            }
           }
        }
       };
     }
}); 
   
//将以base64的图片url数据转换为Blob
function convertBase64UrlToBlob(urlData){
  //去掉url的头，并转换为byte
  var bytes=window.atob(urlData.split(',')[1]);    
  //处理异常,将ascii码小于0的转换为大于0
  var ab = new ArrayBuffer(bytes.length);
  var ia = new Uint8Array(ab);
  for (var i = 0; i < bytes.length; i++) {
    ia[i] = bytes.charCodeAt(i);
  }
  return new Blob( [ab] , {type : 'image/png'});
}

实际开发中存在问题：
1.图片不清晰问题，查资料应该是个方法就会导致生成的图片不太清晰，如何将图片清晰 还需要改进
2.html中的部分图片无法生成，是由于图片跨域，导致无法获取对应的图片。
解决办法:将图片从本地获取
还有个解决办法是
在 <img>标签中设置crossOrigin = ‘anonymous’ 但是并没有解决
具体原因看这里：
链接: https://segmentfault.com/q/1010000008648867/a-1020000008651198.
3.如何生成多张图片，在项目中由于是引用的模板，会根据数据的多少生成多条数据，在html页面中对数据分别生成不同的PDF，解决办法是：在标签中 加入 id="XX${X_index} contractId="${ x.contractId}"
将多张图片写入数组中并传入后台 formData.append(XXX, XXX)

在后台将图片写入pdf

导入 itext jar包（官方下载地址：https://sourceforge.net/projects/itext/）

@RequestMapping("/exportPdf")
public @ResponseBody void exportPdf(MultipartHttpServletRequest request,HttpServletResponse response)throws ServletException, IOException {
  ResultData result = new ResultData(); //自定义结果格式
  String filePath = "c:\\exportPdf2.pdf";
  String imagePath = "c:\\exportImg2.bmp";
  Document document = new Document(); 
  try{
    Map getMap = request.getFileMap();
    MultipartFile mfile = (MultipartFile) getMap.get("imgData"); //获取数据
    InputStream file = mfile.getInputStream();
    byte[] fileByte = FileCopyUtils.copyToByteArray(file);
       
    FileImageOutputStream imageOutput = new FileImageOutputStream(new File(imagePath));//打开输入流
    imageOutput.write(fileByte, 0, fileByte.length);//生成本地图片文件
    imageOutput.close();
       
    PdfWriter.getInstance(document, new FileOutputStream(filePath)); //itextpdf文件
// document.setPageSize(PageSize.A2);
    document.open();
    document.add(new Paragraph("JUST TEST ..."));
    Image image = Image.getInstance(imagePath); //itext-pdf-image
    float heigth = image.getHeight(); 
        float width = image.getWidth(); 
        int percent = getPercent2(heigth, width);  //按比例缩小图片
        image.setAlignment(Image.MIDDLE); 
        image.scalePercent(percent+3);
    document.add(image);
    document.close();
   
    result.setSuccess(true);
    operatelogService.addOperateLogInfo(request, "导出成功：成功导出简报Pdf");
  }catch (DocumentException de) {
    System.err.println(de.getMessage());
  }
  catch (Exception e) {
    e.printStackTrace();
    result.setSuccess(false);
    result.setErrorMessage(e.toString());
    try {
      operatelogService.addOperateLogError(request, "导出失败：服务器异常");
    } catch (Exception e1) {
      e1.printStackTrace();
    }
  }
  response.getWriter().print(JSONObject.fromObject(result).toString());
}
 
private static int getPercent2(float h, float w) {
  int p = 0;
  float p2 = 0.0f;
  p2 = 530 / w * 100;
  p = Math.round(p2);
  return p;
}

实际：

MultiValueMap<String, MultipartFile> imgData=request.getMultiFileMap();
MultipartFile mfile = imgData.get(XXX).get(0);

mfile 就是输入流了 可以转为实际的图片 并将图片写入pdf中

ps：刚入行 欢迎多多交流