[JQUERY] 제대로 jsPDF 라이브러리를 사용하는 방법

제대로 jsPDF 라이브러리를 사용하는 방법

해결법

1. ---

   1.다음과 같이 당신은 HTML에서 PDF 파일을 사용할 수 있습니다

   다음과 같이 당신은 HTML에서 PDF 파일을 사용할 수 있습니다

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
   

   또는 로컬로 다운로드

   식별자하거나 변경 #content는 당신이 필요로하는 식별자로 통과하려면이 옵션을 사용자 정의합니다.

    <script>
       function demoFromHTML() {
           var pdf = new jsPDF('p', 'pt', 'letter');
           // source can be HTML-formatted string, or a reference
           // to an actual DOM element from which the text will be scraped.
           source = $('#content')[0];
   
           // we support special element handlers. Register them with jQuery-style 
           // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
           // There is no support for any other type of selectors 
           // (class, of compound) at this time.
           specialElementHandlers = {
               // element with id of "bypass" - jQuery style selector
               '#bypassme': function (element, renderer) {
                   // true = "handled elsewhere, bypass text extraction"
                   return true
               }
           };
           margins = {
               top: 80,
               bottom: 60,
               left: 40,
               width: 522
           };
           // all coords and widths are in jsPDF instance's declared units
           // 'inches' in this case
           pdf.fromHTML(
               source, // HTML string or DOM elem ref.
               margins.left, // x coord
               margins.top, { // y coord
                   'width': margins.width, // max width of content on PDF
                   'elementHandlers': specialElementHandlers
               },
   
               function (dispose) {
                   // dispose: object with X, Y of the last line add to the PDF 
                   //          this allow the insertion of new lines after html
                   pdf.save('Test.pdf');
               }, margins
           );
       }
   </script>
   

   <a href="javascript:demoFromHTML()" class="button">Run Code</a>
   <div id="content">
       <h1>  
           We support special element handlers. Register them with jQuery-style.
       </h1>
   </div>
   

2. ---

   2.당신은이 링크 jspdf.min.js 필요

   당신은이 링크 jspdf.min.js 필요

   그것은 모든 것을 가지고있다.

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
   

3. ---

   3.이것은 나 (트리거 처분)을 위해 무엇을했는지 마침내 :

   이것은 나 (트리거 처분)을 위해 무엇을했는지 마침내 :

   온 클릭 함수 () { var에 PDF는 새로운 jsPDF ( 'P', 'PT', '편지') =; pdf.canvas.height = 72 * 11; pdf.canvas.width = 72 * 8.5; pdf.fromHTML (는 document.body); ( '있는 test.pdf')를 pdf.save; }; VAR 요소 document.getElementById를 ( "clickbind을") =; element.addEventListener ( "클릭", 온 클릭)

   Dsdas 를 클릭 <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js">

   ko.bindingHandlers.generatePDF = {
       init: function(element) {
   
           function onClick() {
               var pdf = new jsPDF('p', 'pt', 'letter');
               pdf.canvas.height = 72 * 11;
               pdf.canvas.width = 72 * 8.5;
   
               pdf.fromHTML(document.body);
   
               pdf.save('test.pdf');                    
           };
   
           element.addEventListener("click", onClick);
       }
   };
   

4. ---

   4.당신은 또한 jspdf.plugin.from_html.js 라이브러리를 사용해야하지? 주요 라이브러리 (jspdf.js) 외에, 당신은 (이미지 사용에 대한 jspdf.plugin.addimage.js 같은) "특수 작전"에 대한 다른 라이브러리를 사용해야합니다. https://github.com/MrRio/jsPDF을 확인합니다.

   당신은 또한 jspdf.plugin.from_html.js 라이브러리를 사용해야하지? 주요 라이브러리 (jspdf.js) 외에, 당신은 (이미지 사용에 대한 jspdf.plugin.addimage.js 같은) "특수 작전"에 대한 다른 라이브러리를 사용해야합니다. https://github.com/MrRio/jsPDF을 확인합니다.

5. ---

   5.첫째, 당신은 핸들러를 작성해야합니다.

   첫째, 당신은 핸들러를 작성해야합니다.

   var specialElementHandlers = {
       '#editor': function(element, renderer){
           return true;
       }
   };
   

   다음 클릭 이벤트에서이 코드를 작성 :

   doc.fromHTML($('body').get(0), 15, 15, {
       'width': 170, 
       'elementHandlers': specialElementHandlers
           });
   
   var pdfOutput = doc.output();
               console.log(">>>"+pdfOutput );
   

   이미 문서 변수를 선언 한 가정. 그리고 그런 다음 파일 - 플러그인을 사용하여이 PDF 파일을 저장합니다.

6. ---

   6.최신 버전 (1.5.3)에 따르면 더 이상 아무 fromHTML () 메소드가 없다. 대신 당신이 jsPDF HTML 플러그인을 활용한다, 참조 : https://rawgit.com/MrRio/jsPDF/master/docs/module-html.html#~html

   최신 버전 (1.5.3)에 따르면 더 이상 아무 fromHTML () 메소드가 없다. 대신 당신이 jsPDF HTML 플러그인을 활용한다, 참조 : https://rawgit.com/MrRio/jsPDF/master/docs/module-html.html#~html

   또한 제대로 작동하려면 그것을 위해 html2canvas 라이브러리를 추가해야합니다 https://github.com/niklasvh/html2canvas

   JS (API의 문서로부터) :

   var doc = new jsPDF();   
   
   doc.html(document.body, {
      callback: function (doc) {
        doc.save();
      }
   });
   

   당신은뿐만 아니라 DOM 요소에 HTML 문자열 대신 참조를 제공 할 수 있습니다.

7. ---

   7.그것은 적용 방법에 대한 vuejs에서 얼마나?

   그것은 적용 방법에 대한 vuejs에서 얼마나?

   온 클릭 함수 () { var에 PDF는 새로운 jsPDF ( 'P', 'PT', '편지') =; pdf.canvas.height = 72 * 11; pdf.canvas.width = 72 * 8.5; pdf.fromHTML (는 document.body); ( '있는 test.pdf')를 pdf.save; }; VAR 요소 document.getElementById를 ( "clickbind을") =; element.addEventListener ( "클릭", 온 클릭)

   Dsdas 를 클릭 <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js">

from https://stackoverflow.com/questions/16858954/how-to-properly-use-jspdf-library by cc-by-sa and MIT license