Jak ustawić szerokość kolumny do generowania pdf za pomocą jsPDF

Question

Zostałem uderzony przez ostatnie dwa dni, aby ustawić szerokość kolumny do generowania PDF za pomocą jsPDF.

Jestem w stanie wygenerować pdf przy użyciu jsPDF lib z tabeli html, ale otrzymuję problem nakładających się kolumn. Ponieważ chcę wyświetlić 20 kolumn w arkuszu. Zmieniono opcje portret na poziomy i ustaw szerokość 5000 w eksportowaniu opcji skryptu, a także szerokość tablicy html.

Proszę mi pomóc, ustawić szerokość kolumny PDF z jsPDF. Dzięki

Answer 1

miałem ten sam problem z powrotem 4 dni i był w stanie go naprawić .. I dostarczyły przykładowy kod poniżej, aby zrozumieć ..

jestem przy założeniu, że wymogiem jest, aby wyeksportować tabelę HTML (wspomniano poniżej jako table1, który ma 3 lub więcej wierszy) do formatu PDF. Do czego będziemy ustawiać szerokość komórki/kolumny i dodatkowo czcionki i typy czcionek dla tych 3 wierszy ..

Pierwszy wiersz będzie nagłówkiem - tak pogrubienie zostanie zastosowane .. Zastosowałem różne style dla 2. i 3. wierszy dla zrozumienie dostępnych stylów. Jeśli chcesz zastosować inną szerokość kolumny dla każdej z kolumn - możesz to również zrobić.

Mam nadzieję, że poniższy kod jest czytelny i nie wymaga objaśnień. Daj mi znać, jeśli masz jakieś pytania:

$(document).on("click", "#btnExportToPDF", function() { 

     var table1 = 
     tableToJson($('#table1').get(0)), 
     cellWidth = 35, 
     rowCount = 0, 
     cellContents, 
     leftMargin = 2, 
     topMargin = 12, 
     topMarginTable = 55, 
     headerRowHeight = 13, 
     rowHeight = 9, 

     l = { 
     orientation: 'l', 
     unit: 'mm', 
     format: 'a3', 
     compress: true, 
     fontSize: 8, 
     lineHeight: 1, 
     autoSize: false, 
     printHeaders: true 
    }; 

    var doc = new jsPDF(l, '', '', ''); 

    doc.setProperties({ 
     title: 'Test PDF Document', 
     subject: 'This is the subject', 
     author: 'author', 
     keywords: 'generated, javascript, web 2.0, ajax', 
     creator: 'author' 
    }); 

    doc.cellInitialize(); 

    $.each(table1, function (i, row) 
    { 

     rowCount++; 

     $.each(row, function (j, cellContent) { 

      if (rowCount == 1) { 
       doc.margins = 1; 
       doc.setFont("helvetica"); 
       doc.setFontType("bold"); 
       doc.setFontSize(9); 

       doc.cell(leftMargin, topMargin, cellWidth, headerRowHeight, cellContent, i) 
      } 
      else if (rowCount == 2) { 
       doc.margins = 1; 
       doc.setFont("times "); 
       doc.setFontType("italic"); // or for normal font type use ------ doc.setFontType("normal"); 
       doc.setFontSize(8);      

       doc.cell(leftMargin, topMargin, cellWidth, rowHeight, cellContent, i); 
      } 
      else { 

       doc.margins = 1; 
       doc.setFont("courier "); 
       doc.setFontType("bolditalic "); 
       doc.setFontSize(6.5);      

       doc.cell(leftMargin, topMargin, cellWidth, rowHeight, cellContent, i); // 1st=left margin 2nd parameter=top margin,  3rd=row cell width  4th=Row height 
      } 
     }) 
    }) 

doc.save('sample Report.pdf'); }) 




function tableToJson(table) { 
var data = []; 

// first row needs to be headers 
var headers = []; 
for (var i=0; i<table.rows[0].cells.length; i++) { 
    headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi,''); 
} 

// go through cells 
for (var i=1; i<table.rows.length; i++) { 

    var tableRow = table.rows[i]; 
    var rowData = {}; 

    for (var j=0; j<tableRow.cells.length; j++) { 

     rowData[ headers[j] ] = tableRow.cells[j].innerHTML; 

    } 

    data.push(rowData); 
}  

return data; }