자바 스크립트 라이브러리에서 좋은 품질의 PDF를 생성하는 데 문제가 있습니다. jspdf 및 html2canvas

Question

음, pdf 출력을 생성하는 유틸리티 도구를 만들고 있습니다. 사용자로부터 데이터를 가져오고 일부 조작 후 사전 정의 된 형식으로 변환됩니다. 그러면 모든 CSS가 그대로 유지 된 .pdf 형식으로 필요합니다.

전적으로 클라이언트 측 응용 프로그램입니다.

나는 이것을 위해 jsPdf + html2canvas을 사용하고 있습니다. 하지만 다음과 같은 우려 사항이 있습니다.

1. 무엇보다도 먼저 API 설명서를 찾을 수 없습니다. 나는 아직도 다양한 사이트에서 발견 된 코드 조각들로 작업하고있다.
2. 무엇이든간에 출력 품질이 예상보다 떨어졌습니다.
3. 내 HTML 문서가 여러 페이지를 차지할 정도로 크면 첫 페이지 만의 PDF가 계속 표시됩니다. (이것은 지식 부족으로 인한 것입니다.)

많은 비슷한 질문이 있습니다. 나는 거의 모든 것을 시험해 보았고, 전혀 작동하지 않는 사람은 거의 없었고 몇 가지 오류를 유발하는 사람은 거의 없었습니다.

그래서 내 쿼리 :

1. 나의 선택인가, 좋은 품질의 PDF를 생산에 적합 (이 화면에 표시되는 방법이어야 80 % -90 %). 누군가 jspdf 및 html2canvas의 좋은 품질의 출력물로 나를 안내 할 수 있다면 정말로 감사 할 것입니다.

2. 이 라이브러리에 대한 적절한 설명서를 참조하십시오. 현재 가지고있는 것은 doc 폴더이며, github에있는 zip 파일에 따라 제공됩니다.이 파일은 최상의 결과를 내기에는 충분하지 않습니다.

3. 이 방법을 사용할 수없는 경우 더 나은 제품을 찾으십시오. 품질은 우리에게 최고 수준의 요구 사항이며 성능은 협상 될 수 있습니다. 유료 라이브러리에 대한 준비. 그러나 클라이언트 쪽 도구를 선호합니다 (문자 그대로 서버 쪽 구현이 필요하지 않음). 난 정말이의 빠른 도움이 필요

   function previewCtrlFn($scope, Database){ 
        var vm = this; 
        vm.resume = Database.resume; 
        console.log(angular.toJson(vm.resume)); 
        vm.pdf = createPDF; 
   
        var form = $('#aa'), 
         width = form.width(), 
         a4 =[ 615.28, 841.89]; 
   
        function createPDF(){ 
        getCanvas().then(function(canvas){ 
         var 
         img = canvas.toDataURL("image/png"), 
         doc = new jsPDF({ 
           unit:'px', 
           format:'a4' 
          });  
        doc.addImage(img, 'JPEG', 5, 5); 
        doc.save('resume.pdf'); 
        form.width(width); 
        }); 
        } 
   
        // create canvas object 
        function getCanvas(){ 
        form.width((a4[0]*1.33333) -80).css('max-width','none'); 
        return html2canvas(form,{ 
         imageTimeout:1000, 
         removeContainer:true 
         }); 
        } 
       } 
   

   :

나는, 내 코드를 위의 쿼리에 대한 질문을 게시,하지만 단지의 경우 필요합니다.

이 코드를 사용할 수 있습니다

Answer 1

, 당신의 PDF 파일 크기 및 품질이 향상됩니다

html2canvas(body,{ 
    onrendered:function(canvas){ 
     var img=canvas.toDataURL("image/png"); 
     console.dir(canvas); 
     var pdf=new jsPDF("p", "mm", "a4"); 
     var width = pdf.internal.pageSize.width;  
     var height = pdf.internal.pageSize.height; 
     pdf.addImage(canvas, 'JPEG', 0, 0,width,height); 
     pdf.save('test11.pdf'); 
    } 
})