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

Question

I am using jspdf.debug.js to export pdf data from html page.Here is the function of controller that I am using. I made a string as 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 is exporting pdf file like this

I tried style with tang but it is not working How can lower the font size so that i can export pdf file properly ?

Answer 1

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

Answer 2

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

so you can make changes to the original jspdf.debug.js file:

a) default autoSize is false, so you may change it.

b) default fontSize is 12 - you should senthe d 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
    });
}