2016-01-07 4 views
2

J'ai besoin d'exporter le tableau HTML au format pdf en utilisant jspdf. J'ai essayé le code ci-dessous, mais il ne supporte pas ma police. voici démo http://jsfiddle.net/lemonkazi/5o27wo2q/Exporter le tableau HTML en pdf en utilisant la police jspdf ne supportant pas

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 = $('#printableArea')[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 src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script> 
 
<div id="printableArea"> 
 
\t \t \t 
 
\t 
 
\t   <table> 
 
\t \t \t \t <thead> 
 
\t \t \t \t \t <tr><th>ক্রমিক নং</th> 
 
\t \t \t \t \t <th class="psub">প্রকল্পের ধরন</th> 
 
\t \t \t \t \t <th class="punit">সংখ্যা</th> 
 
        <th class="punit"> 
 
        \t দৈর্ঘ্য      \t 
 

 
        </th> 
 
\t \t \t \t \t <!--<th>দৈর্ঘ্য</th> 
 
\t \t \t \t \t <th>প্রস্থ</th> 
 
\t \t \t \t \t <th>উচ্চতা/গভীরতা </th> 
 
\t \t \t \t \t <th>ক্ষেত্রফল</th> 
 
\t \t \t \t \t <th>অন্যান্য</th> \t \t --> 
 
\t \t \t \t \t <th class="ptotal">বরাদ্দের পরিমাণ</th> 
 
\t \t \t \t \t <th class="ptotal">ব্যয়ের পরিমাণ</th> 
 
\t \t \t \t \t <th class="pyear">অগ্রগতীর হার %</th> \t 
 
\t \t \t \t 
 
\t \t \t \t </tr></thead> 
 
\t \t \t \t \t \t \t \t <tbody><tr> 
 
\t \t \t \t \t <td>1</td> 
 
\t \t \t \t \t <td class="pdes"> 
 
\t          রাস্তা নির্মাণ \t               </td> 
 
\t \t \t \t \t <td class="psub">255</td> 
 
        <td class="punit">14166525</td> 
 
\t \t \t \t \t <!--<td></td> 
 
\t \t \t \t \t <td></td> 
 
\t \t \t \t \t <td></td> 
 
\t \t \t \t \t <td></td> \t \t 
 
\t \t \t \t \t <td></td> --> 
 
\t \t \t \t \t <td class="ptotal">2357.01</td> 
 
\t \t \t \t \t <td class="ptotal">2357.01</td> 
 
\t \t \t \t \t <td class="pyear"> \t \t \t \t \t \t     100.00 
 

 
\t \t \t \t \t </td> 
 
\t \t \t \t \t 
 
\t \t \t \t </tr> 
 
\t \t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t <td>2</td> 
 
\t \t \t \t \t <td class="pdes"> 
 
\t          রাস্তা পুনর্নিমাণ \t               </td> 
 
\t \t \t \t \t <td class="psub">2933</td> 
 
        <td class="punit">162942815</td> 
 
\t \t \t \t \t <!--<td></td> 
 
\t \t \t \t \t <td></td> 
 
\t \t \t \t \t <td></td> 
 
\t \t \t \t \t <td></td> \t \t 
 
\t \t \t \t \t <td></td> --> 
 
\t \t \t \t \t <td class="ptotal">25163.47</td> 
 
\t \t \t \t \t <td class="ptotal">25035.20</td> 
 
\t \t \t \t \t <td class="pyear"> \t \t \t \t \t \t     99.49 
 

 
\t \t \t \t \t </td> 
 
\t \t \t \t \t 
 
\t \t \t \t </tr> 
 
\t \t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t <td>3</td> 
 
\t \t \t \t \t <td class="pdes"> 
 
\t          রাস্তা মেরামত \t               </td> 
 
\t \t \t \t \t <td class="psub">1576</td> 
 
        <td class="punit">87554680</td> 
 
\t \t \t \t \t <!--<td></td> 
 
\t \t \t \t \t <td></td> 
 
\t \t \t \t \t <td></td> 
 
\t \t \t \t \t <td></td> \t \t 
 
\t \t \t \t \t <td></td> --> 
 
\t \t \t \t \t <td class="ptotal">14087.86</td> 
 
\t \t \t \t \t <td class="ptotal">14077.93</td> 
 
\t \t \t \t \t <td class="pyear"> \t \t \t \t \t \t     99.93 
 

 
\t \t \t \t \t </td> 
 
\t \t \t \t \t 
 
\t \t \t \t </tr> 
 
\t \t \t \t \t       <tr> 
 
\t \t \t \t \t <td></td> 
 
\t \t \t \t \t <td></td> 
 
\t \t \t \t \t <td>মোটঃ4764</td> 
 
\t \t \t \t \t <td>মোটঃ264664</td> 
 
\t \t \t \t \t <td>মোটঃ 41608.34</td> 
 
\t \t \t \t \t <td>মোটঃ 41470.14</td> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t গড়ঃ 
 
\t \t \t \t \t \t :99.81</td> 
 
\t \t \t \t </tr> 
 
\t \t \t </tbody></table> 
 

 
\t \t \t 
 
\t  </div> 
 
<button onclick="javascript:demoFromHTML();">PDF</button>

ou si vous voulez donner une autre suggestion sans jspdf vous pouvez me suggérer.

Répondre