HTML to PDF (by javascript) how can I add css or table?
Ok after lots of try I have solved it.Especial thanks for mihaidp,Here the code I have solve table row problem
$('#cmd').click(function () {
var table = tableToJson($('#StudentInfoListTable').get(0))
var doc = new jsPDF('p', 'pt', 'a4', true);
doc.cellInitialize();
$.each(table, function (i, row){
doc.setFontSize(10);
$.each(row, function (j, cell){
if(j=='name')
{
doc.cell(10, 50,100, 30, cell, i);
}
else if(j=='email')
{
doc.cell(10, 50,130, 30, cell, i);
}
else if(j=='track')
{
doc.cell(10, 50,40, 30, cell, i);
}
else if(j=='s.s.croll')
{
doc.cell(10, 50,51, 30, cell, i);
}
else if(j=='h.s.croll')
{
doc.cell(10, 50,51, 30, cell, i);
}
else
{
doc.cell(10, 50,70, 30, cell, i);
}
})
})
After solve here the output
Alimon Karim
I'm a 30 years old Software Engineer from Bangladesh. I love everything that has to do with design & development, Project management, Testing, Industrial design and I feel a true devotion for coding. I have 8+ years of experience as a software engineer in software industry. Youtube channel 1 : https://www.youtube.com/channel/UCgjLmfDEaCnH3gS0HuBk8Cg
Updated on June 08, 2022Comments
-
Alimon Karim almost 2 years
In a project I have convert html file into pdf,than it's working fine.But this output not showing css design.Now I need a suggestion how can I add css design with this pdf file?
Here the js function code :
$(function(){ var doc = new jsPDF(); var specialElementHandlers = { '#editor': function (element, renderer) { return true; } }; $('#cmd').click(function () { doc.fromHTML($('#StudentInfoListTable').html(), 15, 15, { 'width': 170, 'elementHandlers': specialElementHandlers }); doc.save('sample-file.pdf'); });
I took help from this project https://github.com/MrRio/jsPDF
This is my table looking
This is the pdf output
I have tried to add a table
$('#cmd').click(function () { var table = tableToJson($('#StudentInfoListTable').get(0)) var doc = new jsPDF('p', pt, 'a1', true); doc.cellInitialize(); $.each(table, function (i, row){ console.debug(row); $.each(row, function (j, cell){ doc.cell(10, 50,120, 50, cell, i); // 2nd parameter=top margin,1st=left margin 3rd=row cell width 4th=Row height }) }) doc.save('sample-file.pdf'); });
Here is the function
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=0; 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; }
It make me cry after see this output !!
Any way to avoid this overlapping ? What is the best solution to add css in pdf?