Jspdf: Full width PDF when saving HTML?

[WindyCityDigital]

Okay, so I have a basic table for a schedule I created for a gym. I want to be able to download that table using jsPDF. As of right now, I've been able to get the table downloading fine, however there are a few things I just can't get to work.

First, I cannot, for the life of me, get the table to be full width within the PDF that get's downloaded. I've read dozens of posts about jsPDF and nothing has been able to solve the problem!

Second, the information within each cell is in 3 different p tags and therefore should be on three different lines, but it is jumbling the lines together.

Third, I would like the cells to remain text aligned center.

The jsFiddle below shows as far as I've gotten, but these last three items are really starting to bug me, and I've researched the heck out of it with no luck...

http://jsfiddle.net/xzZ7n/695/

[diegocr]

See #270 for an alternative method (using addHTML instead of fromHTML)

[neildaemond]

I've also wanted to widen the table width when in landscape mode, and found a little hack/workaround. In jspdf.debug.js, you can change the following line :

width : (cell.clientWidth / table_with) * renderer.pdf.internal.pageSize.width  

to:

width : (cell.clientWidth / table_with) * (renderer.pdf.internal.pageSize.width + 190) 

and adjust the '190' value so that the table fits your page width

[simonbengtsson]

I wrote a plugin that enables auto width for tables.

[oninross]

I have made the table to fit nicely on any kind of paper size in full width. Basically in jspdf.debug.js, you can change the following lines

l;
data = [];
headers = [];
i = 0;
l = table.rows[0].cells.length;
table_with = table.clientWidth;
while (i < l) {
    cell = table.rows[0].cells[i];
    headers[i] = {
        name : cell.textContent.toLowerCase().replace(/\s+/g, ''),
        prompt : cell.textContent.replace(/\r?\n/g, ''),
        width : (cell.clientWidth / table_with) * renderer.pdf.internal.pageSize.width
    };
    i++;
}

to:

data = [];
headers = [];
i = 0;
l = table.rows[0].cells.length;

table_with = ((((pageSizeWidth * 96) / 72 ) - marginLeft - marginRight) / l) - 2;

while (i < l) {

    cell = table.rows[0].cells[i];
    headers[i] = {
        name : cell.textContent.toLowerCase().replace(/\s+/g, ''),
        prompt : cell.textContent.replace(/\r?\n/g, ''),
        width : table_with
        // width : (cell.clientWidth / table_with) * renderer.pdf.internal.pageSize.width
    };
    i++;
}

[sajadghawami]

pageSizeWidth is not defined

where is it declared?

[oninross]

oops...my bad...find the tableToJson method. the variables should be like the one below

var data,
      headers,
      i,
      j,
      rowData,
      tableRow,
      table_obj,
      table_with,
      cell,
      marginLeft = renderer.pdf.margins_doc.left ? renderer.pdf.margins_doc.left : 0,
      marginRight = renderer.pdf.margins_doc.right ? renderer.pdf.margins_doc.right : 0,
      pageSizeWidth = renderer.pdf.internal.pageSize.width,
      l;
      data = [];
      headers = [];
      i = 0;
      l = table.rows[0].cells.length;

      table_with = ((((pageSizeWidth * 96) / 72 ) - marginLeft - marginRight) / l) - 2;

      while (i < l) {
                cell = table.rows[0].cells[i];
                headers[i] = {
                    name : cell.textContent.toLowerCase().replace(/\s+/g, ''),
                    prompt : cell.textContent.replace(/\r?\n/g, ''),
                    width : table_with
                    // width : (cell.clientWidth / table_with) * renderer.pdf.internal.pageSize.width
                };
                i++;
            }

[MrRio]

Hi there,

Thanks very much for your issue. We're closing many of the old issues while we focus on v2. If you
still think this is a major problem, please reopen.

Many thanks,
James

[amvivekanand1992]

Did any one find solution for it?? I am facing the same issue. My table is extending and the right margin gets cut off.

[121371]

I am having the same issue. Can anyone help me with this? As I have around 6 columns hence column names are getting hide.