Metodo di salvataggio di una pagina HTML come immagine e scrittura in PDF (raccomandato)

Il requisito è una funzione di esportazione PDF, dopo molte peripezie è finalmente stato realizzato, ma ci sono state molte deviazioni e si sospetta che questo metodo sia ancora deviato.

C'è un plugin jsPDF che può generare PDF direttamente nel frontend, molto semplice, ma non supporta IE.

Frontend:

Prima di tutto, includi　　html2canvas.js

html2canvas(document.body, { //Oggetto di screenshot
     //Ecco come configurare i parametri dettagliati
     onrendered: function(canvas) { //Callback di completamento della renderizzazione canvas
       canvas.id = "mycanvas"; 
       //Genera dati dell'immagine in base64
       var dataUrl = canvas.toDataURL('image/png');  //Specifica il formato, può anche non essere specificato
       var formData = new FormData(); //Oggetto di form simulato
       formData.append("imgData", convertBase64UrlToBlob(dataUrl), "123.png"); //Inserisci i dati
       var xhr = new XMLHttpRequest(); //Metodo di trasmissione dei dati
       xhr.open("POST", "../bulletin/exportPdf"); //Configura il metodo di trasmissione e l'indirizzo
       xhr.send(formData);
       xhr.onreadystatechange = function(){ //Funzione di callback
         if(xhr.readyState == 4){
            if (xhr.status == 200) {
               var back = JSON.parse(xhr.responseText);
               if(back.success == true){
                 alertBox({content: 'Esportazione PDF riuscita!',lock: true,drag: false,ok: true});
               }else{
                 alertBox({content: 'Esportazione PDF fallita!',lock: true,drag: false,ok: true});
               }
            }
         }
       };
     }
}); 
//Converti i dati dell'URL dell'immagine in base64 in Blob
function convertBase64UrlToBlob(urlData){
  //Rimuovi l'intestazione dell'URL e convertila in byte
  var bytes = window.atob(urlData.split(',')[1]);    
  //Gestione delle eccezioni, convertire i codici ASCII inferiori a 0 in superiori a 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'});
}

Compatibilità: Firefox 3.5+, Chrome, Opera, IE10+

Non supportato: iframe, plugin del browser, Flash

Per le immagini incrociate, aggiungere l'intestazione di permesso di richiesta incrociata al server incrociato

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

Le immagini svg non sono supportate direttamente, ci sono già pacchetti di patch, ma non ho provato.

IE9 non supporta il formato di dati FormData né Blob, in questo caso rimuovere l'intestazione URL dalla stringa 64base generata da canvas e inviarla direttamente al backend, dopo che il backend la riceve:

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

Backend:

Importare il pacchetto jar di itext

　

@RequestMapping("/exportPdf")
public @ResponseBody void exportPdf(MultipartHttpServletRequest request,HttpServletResponse response)throws ServletException, IOException {
  ResultData result = new ResultData();  //Definizione di formato di risultato personalizzato
  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"); //Ricezione dei dati
    InputStream file = mfile.getInputStream();
    byte[] fileByte = FileCopyUtils.copyToByteArray(file);
    FileImageOutputStream imageOutput = new FileImageOutputStream(new File(imagePath));//Apertura dello stream di input
    imageOutput.write(fileByte, 0, fileByte.length);//Creazione del file immagine locale
    imageOutput.close();
    PdfWriter.getInstance(document, new FileOutputStream(filePath)); //itextpdf file
//    document.setPageSize(PageSize.A2);
    document.open();
    document.add(new Paragraph("Soltanto un test ..."));
    Image image = Image.getInstance(imagePath); //itext-pdf-image
    float heigth = image.getHeight(); 
        float width = image.getWidth(); 
        int percent = getPercent2(heigth, width);  //Riduzione delle immagini in proporzione
        image.setAlignment(Image.MIDDLE); 
        image.scalePercent(percent+3);
    document.add(image);
    document.close();
    result.setSuccess(true);
    operatelogService.addOperateLogInfo(request, "Esportazione riuscita: report PDF esportato con successo");
  }catch (DocumentException de) {
    System.err.println(de.getMessage());
  }
  catch (Exception e) {
    e.printStackTrace();
    result.setSuccess(false);
    result.setErrorMessage(e.toString());
    try {
      operatelogService.addOperateLogError(request, "Esportazione fallita: eccezione del server");
    } 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;
}

　iText è un progetto famoso di open source sul sito sourceforge, è una libreria Java utilizzata per generare documenti PDF.

Velocità di elaborazione rapida, supporta molte funzionalità "avanzate" di PDF.

Ma quando itext fallisce, non segnala un errore, salta direttamente e, guardando indietro il documento PDF danneggiato, non trova la ragione dell'errore, è veramente frustrante.

Infine, ringrazio i post e i thread su Internet relativi e la ricerca su Baidu.

Questo articolo spiega come salvare una pagina HTML come immagine e scrivere l'immagine in un file PDF (metodo raccomandato) è tutto ciò che ho condiviso con voi. Spero che possa essere di riferimento per voi e che possiate sostenere fortemente la guida urla.