2016-05-26 12 views
0

jspを使用してjspコードをPDFファイルに変換しようとしています。しかしそれは私に TypeErrorを与えています:pdf.fromHTMLは関数ではありません。 私はhttps://github.com/MrRio/jsPDFからjspdf zipをダウンロードしました。 私のコードはTypeError:jspdfを使用してhtmlからpdfへの変換中にpdf.fromHTMLが機能しない

<html> 
<head> 

<title>Exporting table data to pdf Example</title> 


<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script> 
<script src="jsPDF/jspdf.js"></script> 
<script src="jsPDF/main.js"></script> 



<script type="text/javascript"> 
    $(document).ready(function() { 

     $("#exportpdf").click(function() { 
      var pdf = new jsPDF('p', 'pt', 'ledger'); 
      // source can be HTML-formatted string, or a reference 
      // to an actual DOM element from which the text will be scraped. 
      source = $('#yourTableIdName')[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 : 60, 
       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('fileNameOfGeneretedPdf.pdf'); 
      }, margins); 
     }); 

    }); 
</script> 



</head> 
<body> 
<div id="yourTableIdName"> 
    <table style="width: 1020px;font-size: 12px;" border="1"> 
     <thead> 
      <tr align="left"> 
       <th>Country</th> 
       <th>State</th> 
       <th>City</th> 
      </tr> 
     </thead> 


     <tbody> 

      <tr align="left"> 
       <td>India</td> 
       <td>Telangana</td> 
       <td>Nirmal</td> 
      </tr> 
<tr align="left"> 
       <td>India</td> 
       <td>Telangana</td> 
       <td>Nirmal</td> 
      </tr><tr align="left"> 
       <td>India</td> 
       <td>Telangana</td> 
       <td>Nirmal</td> 
      </tr><tr align="left"> 
       <td>India</td> 
       <td>Telangana</td> 
       <td>Nirmal</td> 
      </tr><tr align="left"> 
       <td>India</td> 
       <td>Telangana</td> 
       <td>Nirmal</td> 
      </tr><tr align="left"> 
       <td>India</td> 
       <td>Telangana</td> 
       <td>Nirmal</td> 
      </tr><tr align="left"> 
       <td>India</td> 
       <td>Telangana</td> 
       <td>Nirmal</td> 
      </tr> 
     </tbody> 
    </table></div> 

    <input type="button" id="exportpdf" value="Download PDF"> 


</body> 

</html> 

答えて

0

あなたは間違ったファイルにロードしています。

Javascriptライブラリでは、生のソースファイルがあり、配布可能なコンパイル済みファイルがあります。したがって、このような図書館を見ているときに、そのファイルを含めるには、dist/ディレクトリにチェックインするのが一般的です。したがって、インクルードする必要があるのは、jspdf.debug.jsまたはjspdf.min.js

のいずれかです。リポジトリに含まれている例は、ライブラリの組み込み方法と使用方法を理解するのに適しています。ここでの基本的な例をチェックアウト:

https://github.com/MrRio/jsPDF/blob/master/examples/basic.html

0

ただ、次の依存関係を使用します。

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script> 

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

あなたがjspdf.debug.jsファイルを上書きしますその他のjspdf.jsのファイルが含まれていない、ことを確認してください。複数のバージョンを含めると、問題が発生します。

関連する問題