Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
179
rated 0 times [  180] [ 1]  / answers: 1 / hits: 14931  / 11 Years ago, wed, january 22, 2014, 12:00:00

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
enter



This is the pdf output



enter



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 !!



enter



Any way to avoid this overlapping ?
What is the best solution to add css in pdf?


More From » html

 Answers
0

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
enter


[#48457] Tuesday, January 21, 2014, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
loganl

Total Points: 424
Total Questions: 86
Total Answers: 112

Location: Zimbabwe
Member since Thu, Jul 21, 2022
2 Years ago
;