HTML到PDF(通过javascript)如何添加css或表格?
在一个项目中,我已经将html文件转换成pdf格式,但效果很好。但是这个输出没有显示css设计。现在我需要一个建议,如何将css设计添加到这个pdf文件中 下面是js函数代码:HTML到PDF(通过javascript)如何添加css或表格?,javascript,html,css,pdf,jspdf,Javascript,Html,Css,Pdf,Jspdf,在一个项目中,我已经将html文件转换成pdf格式,但效果很好。但是这个输出没有显示css设计。现在我需要一个建议,如何将css设计添加到这个pdf文件中 下面是js函数代码: $(function(){ var doc = new jsPDF(); var specialElementHandlers = { '#editor': function (element, renderer) { return true;
$(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');
});
我从这个项目中得到了帮助
这是我的桌子
这是pdf输出
我试图添加一个表
$('#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');
});
下面是函数
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;
}
函数tableToJson(表){
var数据=[];
//第一行必须是标题
var头=[];
对于(var i=0;iHmm!我认为这篇文章可以为您提供所需的一切,mPDF:
对于jsPDF,我只知道其艰难之处:(参见方法摘要)
希望有帮助!好的,经过多次尝试,我已经解决了它。特别感谢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);
}
})
})
在这里求解输出
我也在做同样的事情,但是我的talbe行被一个偏移了。不知道为什么。你有相同的问题吗?我的意思是我的第一行是空的,最后一行没有任何边框。。。