HTML 페이지를 이미지로 저장하고 이미지를 PDF에 쓰는 구현 방법(추천)

필요는 PDF 내보내기 기능입니다. 여러쪽을 달려서 최종적으로 구현되었지만, 많은 곡절을 거쳐 이제까지 왔으며, 현재 방법이 여전히 곡절이 아닌지 의심스럽습니다.

프론트엔드에서 바로 PDF를 생성할 수 있는 jsPDF 플러그인이 있습니다. 간단하지만 IE는 지원하지 않습니다.

프론트엔드:

먼저 가져오세요　　html2canvas.js

html2canvas(document.body, { //스크린 캡처 객체
     //이곳에서 상세한 매개변수를 설정할 수 있습니다
     onrendered: function(canvas) { //canvas 렌더링 완료 콜백
       canvas.id = "mycanvas"; 
       // base 생성64이미지 데이터
       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});
               }
            }
         }
       };
     }
}); 
//base로 변환될64의 이미지 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'});
}

호환성: Firefox 3.5+, Chrome, Opera, IE10+

iframe, 브라우저 플러그인, Flash는 지원되지 않습니다

다중 도메인 이미지는 다중 도메인 서버 헤더에 허용된 다중 도메인 요청을 추가해야 합니다

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

svg 이미지는 직접 지원되지 않으며 패치 패키지가 있습니다. 하지만 테스트하지 않았습니다.

IE9FormData 데이터 형식을 지원하지 않으며 Blob도 지원하지 않습니다. 이 경우 canvas에서 생성된64base 문자열의 URL 머리를 제거한 후 바로 백엔드에 전달합니다. 백엔드가 수신한 후:

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

백엔드：

itext jar 패키지 가져오기

　

@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(높이, 너비);  //이미지를 비율로 축소합니다
        image.setAlignment(Image.MIDDLE); 
        image.scalePercent(percent+3);
    document.add(image);
    document.close();
    result.setSuccess(true);
    operatelogService.addOperateLogInfo(request, "导出成功：成功导出简报Pdf");
  catch (Exception e) {
    e.printStackTrace();
  }
  result.setSuccess(false);
    result.setErrorMessage(e.toString());
    try {
    operatelogService.addOperateLogError(request, "export 실패: 서버 예외");
    ) {
      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는 sourceforge 오픈 소스 프로젝트로 유명한, PDF 문서를 생성하는 Java 라이브러리입니다.

처리 속도가 빨라서 많은 PDF "고급" 기능을 지원합니다.

하지만 itext에서 오류가 발생할 때는 오류를 보고하지 않고, 그냥 건너뛰고, pdf 문서가 손상되었음을 다시 보고, 오류 원인을 찾을 수 없어 정말이지 화가 나いました.

마지막으로 인터넷에서 관련 블로그와 게시물 및 백도우 검색을 감사합니다.

이 기사에서는 html 페이지를 이미지로 저장하고, 이미지를 pdf에 기록하는 구현 방법(추천)을 소개했습니다. 많은 참고가 되길 바라며, 많은 지지와 응원을 부탁드립니다. 노래 가이드.