How to set font size of exported table in jspdf.js?

Question

I am using jspdf.debug.js to export PDF data from an html page. Here is the controller function I'm using. I made a row in the form of an html table that I want to export.

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

and this method exports a pdf file like this

I tried the style with pitch, but it doesn’t work. How to reduce the font size so that I can export the pdf file correctly?

Answer 1

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

Answer 2

This works for me:

 table.style.fontSize = '5px'; 

Answer 3

it seems that “pdf.fromHTML” on tables ignores styling or even jsPdf settings such as “pdf.setFont (" helvetica "); etc.

so that you can make changes to the source file "jspdf.debug.js":

a. default "autoSize" is false, so you can change it.

b. default fontSize - 12 - you must send a smaller value (add your value to the last argument).

 /*** 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 }); 

Answer 4

Try AutoTable - Table Plugin for 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/ jspdf-autotable@2.3.2 '></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>