HTML to PDF (by javascript) 如何添加 css 或 table？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21280055/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML to PDF (by javascript) how can I add css or table?
提问by Alimon Karim
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?
在一个项目中，我已将 html 文件转换为 pdf，但它工作正常。但此输出未显示 css 设计。现在我需要一个建议，如何使用此 pdf 文件添加 css 设计？
Here the js function code :
这里是js函数代码：
$(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
我从这个项目https://github.com/MrRio/jsPDF 得到了帮助
This is my table looking
这是我的桌子
This is the pdf output
这是pdf输出
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?
有什么办法可以避免这种重叠？在 pdf 中添加 css 的最佳解决方案是什么？
采纳答案by Alimon Karim
Ok after lots of try I have solved it.Especial thanks for mihaidp,Here the code I have solve table row problem
好的，经过多次尝试，我已经解决了。特别感谢 mihaidp，这里是我解决表格行问题的代码
$('#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
在这里解决后输出
回答by mihaidp
Hmm! I think this post can give you all you need, with mPDF: how to add css file in mpdf
唔！我认为这篇文章可以为您提供所需的一切，使用 mPDF：如何在 mpdf 中添加 css 文件
With jsPDF I only know about the hard way: http://mrrio.github.io/jsPDF/doc/symbols/jsPDF.html(See Method Summary).
使用 jsPDF 我只知道困难的方法：http://mrrio.github.io/jsPDF/doc/symbols/jsPDF.html （参见方法摘要）。
Hope it helps!
希望能帮助到你！
