use*_*816 6 html javascript jquery jspdf
我在最近两天受到了打击,设置了使用jsPDF生成PDF的列宽.
我能够使用来自html表的jsPDF lib生成pdf,但是我遇到了重叠列的问题.因为我想在工作表中显示20列.我已将选项纵向更改为横向,并在导出脚本选项以及html表格宽度时设置宽度5000.
请帮助我,从jsPDF设置pdf列宽.谢谢
Vin*_*inu 19
4天前我遇到了同样的问题并且能够解决它..我已经提供了以下示例代码供您理解..
我假设要求是将一个html表(下面提到table1,有3行或更多行)导出为PDF格式.我们将为这些3+行设置单元格/列宽以及字体和字体类型.
第一行是Header - 所以应用了粗体..我已经为第二行和第三行应用了不同的样式来理解可用的样式.如果你想为每一列应用不同的列宽,你也可以这样做. .
希望以下代码具有可读性和自解释性.如果您有任何疑问,请告诉我
$(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; }
Run Code Online (Sandbox Code Playgroud)