2015-05-19 15 views
6

Używam jspdf.debug.js do eksportu danych pdf ze strony html. Oto funkcja kontrolera, którego używam. Zrobiłem ciąg jako tabelę html, którą chcę wyeksportować.jak ustawić rozmiar czcionki eksportowanej tabeli w pliku jspdf.js?

$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 
         ) 
      } 

     }); 

    }; 

i ta metoda eksportuje plik pdf jak ten

enter image description here

Próbowałem styl z tang ale to nie działa jaki sposób można zmniejszyć rozmiar czcionki tak, że można wyeksportować plik pdf poprawnie ?

Odpowiedz

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

to nie działa dla danych tabeli –

2

Działa to dla mnie:

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

To wydaje się działać. Można to również zrobić bezpośrednio w kodzie HTML z wbudowanym stylem, tj. '

' –

1

wydaje się, że "pdf.fromHTML" na stołach ignoruje stylizacji, a nawet ustawienia jsPdf, takich jak "pdf.setFont (" Helvetica ");" itp

więc można dokonał zmian na oryginalnym "jspdf.debug.js" file:

a. domyślny "autoSize" jest fałszywy, więc możesz go zmienić.

b. default fontSize to 12 - powinieneś wysłać mniejszą wartość (dodaj swoją wartość do ostatniego argumentu).

/*** 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

Spróbuj AutoTable - wtyczki Tabela dla 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> 
Powiązane problemy