jsPDF - HTML 페이지를 PDF로 정확히 캡쳐

나는 pdf로 인쇄 할 테이블이 필요하고 테이블에 연결된 CSS를 닫지 않아야한다. 저는 angularjs도 사용하고 있습니다. 다른 방법을 찾고 있는데 jsPDF를 실험하고 있습니다.jsPDF - HTML 페이지를 PDF로 정확히 캡쳐

기본 페이지 (rollup.html)에는 pdf로 표를 내보내는 링크가 있습니다. 제어기 내의 JS (rollup.js)에서

<a style="float: right;" href="genPDF()">PDF TEST</a>

는, I는 ID #testDiv 내에 포함되는대로 표시한다 genPDF 기능을 갖는다. 물론

app.controller('Rollup', function($scope, $rootScope, $http, $uibModal, headersvc, locFiltersvc) { 
.... 
function genPDF(){ 
    html2canvas(document.getElementById("testDiv"), { 
     onrendered: function (canvas) { 
      var img = canvas.toDataURL("image/png"); 
      var doc = new jsPDF(); 
      doc.addImage(img, 'JPEG',20,20); 
      doc.save('test.pdf'); 
     } 
    }); 
} 
});

나는 (route.html에 위치) 내가 인화 테이블

<div class="content-div" style="overflow: visible;" id="testDiv"> 
.... 
</div>

포함 된 div에 testDiv를 할당 나는를 사용하여 나머지 탭 작동 다른 버튼이 있습니다 css없이 더 단순한 다른 테이블의 데이터를 클릭하고 브로드 캐스트합니다. 확실하지 않은 경우 ng-click을 사용하여 테이블을 인쇄하고 모든 CSS와 함께 테이블 데이터를 브로드 캐스팅해야합니다.

 <li style="float: right;">  
      <button ng-click="printDiv('rollup-tab')">Printer Friendly</button> 
     </li>

콘솔에 jsPDF 메소드에 대한 오류가 표시되지 않았으므로 그 문제점이 확실하지 않습니다. 어떤 도움을 주셔서 감사합니다. 감사합니다

출처

2017-02-13 Adrew

나는 link을 통해 GitHub의 jsPDF - AutoTable 라이브러리를 살펴볼 것을 강력히 권고합니다. 나는 최근에 당신과 매우 유사한 시나리오를 접했고 CSS를 유지하는 것이이 경우 어렵다는 것을 알았습니다. 이 솔루션은 많은 유스 케이스에 완벽하며 jsPDF에 의존하는 것보다 훨씬 효율적이고 효과적으로 내 문제를 해결합니다. 희망이 도움이!

출처

2017-02-13 23:11:14

감사합니다. 나는 지금 그것을보고있다 – Adrew

내가 따라 왔던 튜토리얼은 [this] (https://www.youtube.com/watch?v=WJOfCnoqShw)였다. 이것은 html의 스냅 사진을 찍어서 jsPDF를 사용하는 pdf, 그러나 didnt는 나를 위해 작동하는 것처럼 보인다. 당신이 보내는 방법은 사용자 입력과 CSS로 전체 표를 다시 만들어야하는 것 같습니다. – Adrew

나는 당신이 선호하는 옵션을 개인적으로 들여다 보았다. 그러나 CSS와 궁극적으로 PDF 문서의 출력을 결정할 브라우저 선택과 관련된 단점이있다. jsPDF AutoTable 라이브러리는 훨씬 유동적 인 접근 방식이며 식별 된 제한 사항에 관계없이 콘텐츠가 올바르게 배치되도록합니다. 이것은 추가 작업이지만 결국에는 효과가 있으며 장기적으로 관리하기 쉽습니다. –

jsPDF - HTML 페이지를 PDF로 정확히 캡쳐

답변

관련 문제