Método de implementación para guardar una página HTML como imagen e insertar imágenes en un archivo PDF (recomendado)

la necesidad es de una función de exportación de pdf, después de mucho correr en todos los lados, finalmente se ha implementado, se han seguido muchos atajos, y se sospecha que este método aún es un atajo.

hay un plugin de jsPDF en el frente que puede generar pdf directamente, es muy conveniente, pero no es compatible con IE.

delantera:

primero incluir　　html2canvas.js

html2canvas(document.body, { //objeto de captura de pantalla
     //aquí se pueden configurar parámetros detallados
     onrendered: function(canvas) { //devolución de llamada al completar la renderización de canvas
       canvas.id = "mycanvas"; 
       // generar base64datos de imagen
       var dataUrl = canvas.toDataURL('image/png');  //especificar el formato, también se puede dejar sin parámetros
       var formData = new FormData(); //objeto de formulario simulado
       formData.append("imgData", convertirBase64UrlToBlob(dataUrl), "123.png"); //escribir datos
       var xhr = new XMLHttpRequest(); //método de transmisión de datos
       xhr.open("POST", "../bulletin/exportPdf"); //configurar el método de transmisión y la dirección
       xhr.send(formData);
       xhr.onreadystatechange = function() { //función de devolución de llamada
         if (xhr.readyState == 4{
            if (xhr.status == 200) {
               var back = JSON.parse(xhr.responseText);
               if (back.success == true) {
                 alertBox({content: '¡Exportación de PDF exitosa!', lock: true, drag: false, ok: true});
               } else {
                 alertBox({content: '¡Exportación de PDF fallida!', lock: true, drag: false, ok: true});
               }
            }
         }
       };
     }
}); 
//será con base64datos de url de imagen en Blob
function convertirBase64UrlToBlob(urlData){
  //Quitar la cabecera de url y convertir a byte
  var bytes=window.atob(urlData.split(',')[1]);    
  //manejo de excepciones, convirtiendo ascii menor que 0 en mayor que 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'});
}

Compatibilidad: Firefox 3.5+, Chrome, Opera, IE10+

No admite: iframe, complementos de navegador, Flash

Las imágenes que requieren acceso cruzado deben añadirse al encabezado del servidor de acceso cruzado la solicitud permitida de acceso cruzado

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

Las imágenes svg no se pueden admitir directamente, ya hay paquetes de parche, pero no lo he probado.

IE9No admite el formato de datos FormData, ni Blob, en este caso, el canvas generado64La cadena base elimina la cabecera de url y se transmite directamente al backend, después de que el backend la reciba:

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

backend：

importar paquete itext jar

　

@RequestMapping("/exportPdf")
public @ResponseBody void exportPdf(MultipartHttpServletRequest request,HttpServletResponse response)throws ServletException, IOException {
  ResultData result = new ResultData();  //personalizar formato de resultado
  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"); //obtener datos
    InputStream file = mfile.getInputStream();
    byte[] fileByte = FileCopyUtils.copyToByteArray(file);
    FileImageOutputStream imageOutput = new FileImageOutputStream(new File(imagePath));//abrir flujo de entrada
    imageOutput.write(fileByte, 0, fileByte.length);//generar archivo de imagen local
    imageOutput.close();
    PdfWriter.getInstance(document, new FileOutputStream(filePath)); //archivo itextpdf
//    document.setPageSize(PageSize.A2);
    document.open();
    document.add(new Paragraph("SÓLO PRUEBA ..."));
    Image image = Image.getInstance(imagePath); //itext-pdf-image
    float height = image.getHeight(); 
        float width = image.getWidth(); 
        int percent = getPercent2(altura, anchura);  //reducir la imagen en proporción
        image.setAlignment(Image.MIDDLE); 
        image.scalePercent(percent+3);
    document.add(image);
    document.close();
    result.setSuccess(true);
    operatelogService.addOperateLogInfo(request, "exportación exitosa: exportación exitosa del informe Pdf");
  System.err.println(de.getMessage());
    catch (Exception e) {
  }
  e.printStackTrace();
    result.setSuccess(false);
    result.setErrorMessage(e.toString());
    try {
    operatelogService.addOperateLogError(request, "Exportación fallida: excepción del servidor");
      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 es un proyecto conocido de código abierto en el sitio sourceforge, es una biblioteca de clases Java utilizada para generar documentos PDF.

Velocidad de procesamiento rápida, soporta muchas características "avanzadas" de PDF.

Pero cuando iText da error, no muestra un mensaje de error, simplemente salta y al volver a mirar el documento PDF dañado, no puedo encontrar la razón del error, lo que es muy frustrante.

Finalmente, agradezco los artículos y publicaciones en línea y las búsquedas en Baidu.

Este artículo sobre cómo guardar una página HTML como imagen y escribir la imagen en un archivo PDF (recomendado) es todo lo que comparto con ustedes, espero que les sirva de referencia y que apoyen activamente el tutorial de alarido.