2015-05-19 4 views
6

Ich benutze jspdf.debug.js, um PDF-Daten von HTML-Seite zu exportieren. Hier ist die Funktion des Controllers, den ich verwende. Ich habe eine Zeichenfolge als HTML-Tabelle erstellt, die ich exportieren möchte.Wie stelle ich die Schriftgröße der exportierten Tabelle in jspdf.js ein?

$scope.exportReport = function (fileName, fileType) { 
    objReport.count = 0; // for getting all records 
    ReportService.getSaleDetail(objReport).then(function (result) { 
     var strTable = "<table id='tableReport'><tr><td style='width:400px'>Date</td><td style='width:50px'>Order Id</td><td style='width:130px'>Product</td><td style='width:120px'>Gorss Price</td><td style='width:160px'>Currency</td><td style='width:50px'>Order Status</td><td style='width:150px'>Assigned To</td><td style='width:150px'>Assigned User Email</td><td style='width:150px'>Country</td></tr>"; 
     var strRow = ''; 
     if (result.data.totalRecords > 0) { 
      var totalRecords = parseInt(result.data.totalRecords); 
      var saleDataJson = result.data.saleDetail; 
      for (var i = 0; i < totalRecords; i++) { 
       strRow = '<tr><td>' + saleDataJson[i].date + '</td>' + '<td>' + saleDataJson[i].orderId + '</td>' + '<td>' + saleDataJson[i].product + '</td>' + '<td>' + (1 * saleDataJson[i].grossPrice).toFixed(2) + '</td>' + '<td>' + saleDataJson[i].currency + '</td>' + '<td>' + saleDataJson[i].orderStatus + '</td>' + '<td>' + saleDataJson[i].assignedTo + '</td><td>' + saleDataJson[i].assignedUserEmail + '</td><td>' + saleDataJson[i].country + '</td></tr>'; 
       strTable += strRow; 
      } 
      strTable += "</table>"; 
     } 
     if (fileType === 'pdf') { 
       var pdf = new jsPDF('p', 'pt', 'letter') // jsPDF(orientation, unit, format) 
         , source = strTable 
         , specialElementHandlers = { 
          // element with id of "bypass" - jQuery style selector 
          '#bypassme': function (element, renderer) { 
           // true = "handled elsewhere, bypass text extraction" 
           return true; 
          } 
         }, 
       margins = { 
        top: 30, 
        bottom: 40, 
        left: 35, 
        width: 600 
       }; 

       pdf.setFontSize(12); 
       pdf.text(200, 30, fileName); 
       pdf.setFontSize(8); 
       pdf.setFontStyle('italic'); 
       pdf.text(420, 35, 'Total Records : ' + totalRecords); 
       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(fileName + '.pdf'); 
       }, 
         margins 
         ) 
      } 

     }); 

    }; 

und diese Methode ist der Export pdf-Datei wie diese

enter image description here

habe ich versucht, mit tang Stil, aber es ist nicht Arbeits Wie kann die Schriftgröße senken, so dass ich pdf-Datei exportieren richtig ?

Antwort

4
pdf.setFont("helvetica"); 
pdf.setFontType("bold"); 
pdf.setFontSize(9); 
+0

diese Arbeit ist nicht für die Tabellendaten –

2

Dies funktioniert für mich:

table.style.fontSize = '5px'; 
+0

Dies scheint zu funktionieren. Es kann auch direkt im HTML mit Inline-Styling gemacht werden, d. H. '

' –

1

es scheint, dass "pdf.fromHTML" auf Tabellen ignoriert Styling oder sogar jsPdf Einstellungen wie "pdf.setFont (" Helvetica ");"

usw.

so können Sie Änderungen an der ursprünglichen "jspdf.debug.js" file:

a. Standard "AutoSize" ist falsch, also können Sie es ändern.

b. Standard fontSize ist 12 - Sie sollten einen kleineren Wert senden (fügen Sie Ihren Wert zum letzten Argument hinzu). Versuchen

/*** TABLE RENDERING ***/ 
} else if (cn.nodeName === "TABLE") { 
    table2json = tableToJson(cn, renderer); 
    renderer.y += 10; 
    renderer.pdf.table(renderer.x, renderer.y, table2json.rows, table2json.headers, { 
      autoSize : true, 
      printHeaders : true, 
      margins : renderer.pdf.margins_doc, 
      fontSize : 9 
     }); 
0

AutoTable - Tisch Plugin für jsPDF

<a class="pull-right btn btn-warning btn-large" href="#" onclick="generate();"><i class="fa fa-file-excel-o"></i> PDF Data</a> 
<table class="table table-bordered table-striped" id="basic-table"> 

<script src='https://cdn.rawgit.com/simonbengtsson/jsPDF/requirejs-fix-dist/dist/jspdf.debug.js'></script> 
<script src='https://unpkg.com/[email protected]'></script> 
<script src="<?php echo base_url();?>assets/bower_components/jspdf/dist/index.js"></script> 
<script> 


function generate() { 

    var doc = new jsPDF('l', 'pt', 'a4'); 
    doc.setFontSize(12); 

    var res = doc.autoTableHtmlToJson(document.getElementById("basic-table")); 
    doc.autoTable(res.columns, res.data, {margin: {top: 80}}); 

    var header = function(data) { 
    doc.setFontSize(18); 
    doc.setTextColor(40); 
    doc.setFontStyle('normal'); 
    //doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50); 
    doc.text("Country List", data.settings.margin.left, 50); 
    }; 

    var options = { 
    beforePageContent: header, 
    margin: { 
     top: 80 
    }, 

    startY: doc.autoTableEndPosY() + 20 
    }; 

    doc.autoTable(res.columns, res.data, options); 

    doc.save("Test.pdf"); 
} 



</script>