Html2canvas - 내용의 절반 만이 PDF에 표시됩니다.

Html2canvas, jsPdf 및 angularjs를 사용하면 내 웹 페이지의 일부를 스크린 샷으로 찍어 PDF 미리보기로 표시 할 수 있습니다. PDF로 컨텐트를 성공적으로 내보낼 수 있었지만 컨텐트의 절반 만 보여줍니다. 이 문제를 해결하려면 어떻게해야합니까?Html2canvas - 내용의 절반 만이 PDF에 표시됩니다.

다음은 pdf를 만드는 버튼입니다. 이 주석 될 때 다른 복사본을 보여주기 때문에 컨트롤러 내 (rollup.html)

<button ng-click="genPDF()">PDF Test</button>

는 I 키 일 수있다 html2canvas 함수 I 믿고 여기 (rollup.js)를 'document.body.appendChild'사용 'pdfTest'가 클릭되었을 때 웹 페이지의 표를 볼 수있을뿐만 아니라 PDF 미리보기에서도 볼 수 있지만 내용의 절반 만 표시됩니다.

테이블이 생성 된 HTML 페이지 내에서 물론

app.controller('Rollup', function($scope, $rootScope, $http, $uibModal, headersvc, locFiltersvc) { 

..... 
$scope.genPDF = function(){ 

    html2canvas(document.getElementById("testDiv"), { 
     onrendered: function (canvas) { 

      //document.body.appendChild(canvas); 

      var img = canvas.toDataURL("image/png"); 
      var doc = new jsPDF(); 
      doc.addImage(img, 'JPEG',10,10); 
      doc.save('test.pdf'); 


      //IE 9-11 WORK AROUND 
      if (navigator.userAgent.indexOf("MSIE ") > 0 || 
        navigator.userAgent.match(/Trident.*rv\:11\./)) 
      { 
       var blob = canvas.msToBlob(); 
       window.navigator.msSaveBlob(blob,'Test file.png'); 
      } 

     }, 
     //width: 300, 
     //height: 300 
    });  
} 

});

, 나는 PDF에 표시 할 내용에 사업부 내에서 testDiv의 ID를 가지고있다. (route.html)

<div class="row" id="testDiv"> 
....all the table content 
</div>

전체 내용을 잘라내지 않고도 PDF 미리보기에 어떻게 맞출 수 있습니까? 어떤 도움이라도 대단히 감사합니다.

출처

2017-02-16 Adrew

매개 변수를 doc.addImage에 추가하는 해결책을 찾았습니다.

doc.addImage(img, 'JPEG',10,10,190,200);

은 내가 PDF 페이지의 이미지를 100 %로 만들려면 잘 모르겠지만, 이것으로 나는이어야 테이블에 가장 적합한 매개 변수를 설정할 수 있습니다. 다행히도 더 나은 해결책을 찾을 수 있지만 지금은 효과가 있습니다.

출처

2017-02-16 19:07:39 Adrew

더 나은 해결책을 찾았습니까? –

html2canvas 메서드를 삭제하고 pdfmake를 사용하여 시작한 다음 pdf로 생성 된 내용의 여백을 설정합니다. 이 방법은 pdfs 인쇄에 적합합니다. – Adrew

Html2canvas - 내용의 절반 만이 PDF에 표시됩니다.

답변

관련 문제