Search code examples
javascriptjquerypdfpdfmake

pdfmake generate PDF from Long HTML Table

I am using pdfmake http://pdfmake.org/ to generate a PDF from an HTML Table and its a great little plugin, but my only problem is I have a very very long table and it gets cut off in width (see screenshot below)

enter image description here

How do I handle long tables? This is just one of my tables, some tables I have are longer, some are shorter. Here is my code:

var widths = [200];

        var bodies = [];

        $('#cost-matrix-table tr:nth-child(3) td').not(':first').each(function () {
            widths.push(100);
        });

        var rowCounter = 0;

        $('#cost-matrix-table tr').not(':nth-child(4)').each(function () {

            var data = [];

            var columnCounter = 0;

            $(this).find("td").each(function () {

                if ((rowCounter == 0 || rowCounter == 1) && columnCounter != 0) {
                    data.push({ text: $(this).text(), colSpan: 2, alignment: 'center' }, {});
                }
                else {
                    if (rowCounter == 2) {
                        if (columnCounter == 0) {
                            data.push({ text: $(this).text(), style: 'filledHeader' });
                        }
                        else {
                            data.push({ text: $(this).text(), style: 'filledHeader', alignment: 'center' });
                        }
                    }
                    else {
                        data.push($(this).text());
                    }
                }

                columnCounter++;

            });

            bodies.push(data);

            rowCounter++;

        });

        var docDefinition = {
            pageOrientation: 'landscape',
            pageMargins: [40, 100, 40, 50],
            pageSize: 'A0',
            header: { text: $("#dropdown").val(), alignment: 'center', decoration: 'underline', fontSize: 28, bold: true, margin: [40, 40, 0, 0] },
            content: [
              {
                  table: {
                      widths: widths,
                      body: bodies,
                      headerRows: 3,
                      pageBreak: 'before',
                      dontBreakRows: true,
                      fontSize: 28
                  }
              }
            ],
            styles: {
                filledHeader: {
                    color: 'white',
                    fillColor: 'black',
                }
            }
        };

        pdfMake.createPdf(docDefinition).download('CostMatrix-' + $("#dropdown").val().replace(/\s/g, '') + '.pdf');

I have my pageSize set to A0 and it still gets cut off...The Height is perfect, just the width gets cut off, please help! I am able to set the width and the height of the page size, but I have no idea what to set it at. My table has 45 columns with a width of 100 per a column, except for the first one which is 200 for a total of 4600

Solution

  • If margins are not an option or a solution, how about a small font style?

    styles: {
    // FONT SIZE

    // SIZE 8
    font_xs: { fontSize: 8 },
    // SIZE 10
    font_sm: { fontSize: 10 },
    // SIZE 12
    font_md: { fontSize: 12 },
    // SIZE 14
    font_lg: { fontSize: 14 },
    // SIZE 16
    font_xl: { fontSize: 16 }

}

    Use like this

    {
    text: 'td 0',
    style: ['font_sm']
}