Methode zum Speichern von HTML-Seiten als Bild und zum Schreiben von Bildern in PDF (Empfohlen)

需求是一个导出pdf的功能，多方奔走终于实现了，走了不少弯路，而且怀疑现在这个方法可能还是弯的。

有一个jsPDF 插件可以在前端直接生成pdf，非常简单，但不支持IE。

前端：

首先引入　　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), "123.png"); //写入数据
       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){
  //Entfernen Sie den Kopf der URL und konvertieren Sie es in byte
  var bytes = window.atob(urlData.split(',')[1]);    
  //Verarbeitung von Ausnahmen, Konvertierung von ASCII-Codes kleiner 0 in größere 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'});
}

Kompatibilität: Firefox 3.5+, Chrome, Opera, IE10+

Nicht unterstützt: iframe, Browser-Plugins, Flash

Für Bilder mit Cross-Origin müssen die Header des Cross-Origin-Server-Zugriffs erlaubt sein

access-control-allow-origin: *　 access-control-allow-credentials: true

SVG-Bilder werden nicht direkt unterstützt, es gibt bereits ein Patch-Paket, aber ich habe es nicht ausprobiert.

IE9Nicht unterstützt: FormData-Datenformat, auch nicht Blob, in diesem Fall wird das von canvas generierte64Übertragen Sie die base-String nach dem Entfernen der URL-Kopfinformationen direkt an den Backend-Server, nachdem der Backend-Server sie empfangen hat:

String base64 = Img.split(",")[1];
BASE64Decoder decode = new BASE64Decoder(); 
byte[] imgByte = decode.decodeBuffer(base64);

Backend:

Importieren Sie das itext jar-Paket

　

@RequestMapping("/exportPdf())
public @ResponseBody void exportPdf(MultipartHttpServletRequest request,HttpServletResponse response)throws ServletException, IOException {
  ResultData result = new ResultData();  //benutzerdefiniertes Ergebnisformat
  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"); //Daten erhalten
    InputStream file = mfile.getInputStream();
    byte[] fileByte = FileCopyUtils.copyToByteArray(file);
    FileImageOutputStream imageOutput = new FileImageOutputStream(new File(imagePath));//Eingabestrom öffnen
    imageOutput.write(fileByte, 0, fileByte.length);//Lokales Bilddatei erzeugen
    imageOutput.close();
    PdfWriter.getInstance(document, new FileOutputStream(filePath)); //itextpdf-Datei
//    document.setPageSize(PageSize.A2);
    document.open();
    document.add(new Paragraph("NUR TEST ..."));
    Image image = Image.getInstance(imagePath); //itext-pdf-image
    float height = image.getHeight(); 
        float width = image.getWidth(); 
        int percent = getPercent2(Höhe, Breite);  //Bild verkleinern proportional
        image.setAlignment(Image.MIDDLE); 
        image.scalePercent(percent+3);
    document.add(image);
    document.close();
    result.setSuccess(true);
    operatelogService.addOperateLogInfo(request, "Export erfolgreich: Kurzfassung Pdf erfolgreich exportiert");
  catch (Exception e) {
    e.printStackTrace();
  }
  result.setSuccess(false);
    result.setErrorMessage(e.toString());
    try {
    operatelogService.addOperateLogError(request, "Export failed: server exception");
    ) {
      catch (Exception e
    }1) {
      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;
}

　iText is a well-known open-source project on the site sourceforge, which is a Java class library used to generate PDF documents.

Fast processing speed, supports many "advanced" features of PDF.

However, when iText fails, it will not report an error and will skip directly. Looking back, the pdf document is damaged and the cause of the error cannot be found, which is really frustrating.

Finally, thank you for the relevant articles and posts on the Internet and Baidu search.

The above article will save the html page as an image, and the method of writing the image into pdf (recommended) that the editor shares with everyone is all the content. I hope it can give everyone a reference and I hope everyone will support the Shouting Tutorial more.