[英]HTML table export to pdf with proper column width and Fonts
我正在使用此导出数据:
<a href="#" class="nonPdf" onclick ="$('#whole').tableExport({type:'pdf', escape:'false'});">Direct PDF</a>
而tableExport.js中的pdf代码为:
否则if(defaults.type =='pdf'){
var doc = new jsPDF('p', 'pt', 'a4', false);
doc.setFontSize(defaults.pdfFontSize);
// Header
var startColPosition = defaults.pdfLeftMargin;
$(el).find('thead').find('tr').each(function() {
console.log(12);
$(this).filter(':visible').find('th').each(function(index, data) {
if ($(this).css('display') != 'none') {
if (defaults.ignoreColumn.indexOf(index) == -1) {
console.log(1);
var colPosition = startColPosition + (index * 50);
doc.text(colPosition, 20, parseString($(this)));
}
}
});
});
// Row Vs Column
var startRowPosition = 20;
var page = 1;
var rowPosition = 0;
$(el).find('tbody').find('tr').each(function(index, data) {
rowCalc = index + 1;
//if (rowCalc % 26 == 0) {
//doc.addPage(); disable new page
//page++;
// startRowPosition = startRowPosition + 30;
//}
rowPosition = (startRowPosition + (rowCalc * 10)) - ((page - 1) * 280);
$(this).filter(':visible').find('td').each(function(index, data) {
console.log(index);
console.log(data);
if ($(this).css('display') != 'none') {
if (defaults.ignoreColumn.indexOf(index) == -1) {
//console.log($(this))
//console.log($(this))
var colPosition = startColPosition + (index * 190);
//var colPosition = startColPosition + (index * $(this)[0].clientWidth);
//console.log(colPosition);
doc.setLineWidth(2)
doc.text(colPosition, rowPosition, parseString($(this)));
//console.log(doc)
}
}
});
});
// Output as Data URI
doc.output('datauri');
}
但是问题是pdf生成的格式不正确吗? 怎么办呢?
我如何正确格式化pdf中的html表。
我在html5中使用下面的代码将html表生成为pdf:-
<a href="#" onClick ="$('#tableID').tableExport({type:'pdf',pdfFontSize:'7',escape:'false'});">PDF</a>
然后我发现pdf生成时单词彼此崩溃。
然后,更改tableExport.js的库代码可以为我解决相同的问题。
我为pdf部分修改的tableExport.js代码如下所示:-
else if(defaults.type == 'pdf'){
var doc = new jsPDF('p','pt', 'a4', true);
doc.setFontSize(defaults.pdfFontSize);
// Header
var startColPosition=defaults.pdfLeftMargin;
$(el).find('thead').find('tr').each(function() {
$(this).filter(':visible').find('th').each(function(index,data) {
if ($(this).css('display') != 'none'){
if(defaults.ignoreColumn.indexOf(index) == -1){
var colPosition = startColPosition+ (index * 70);
doc.text(colPosition,20, parseString($(this)));
}
}
});
});
// Row Vs Column
var startRowPosition = 20; var page =1;var rowPosition=0;
$(el).find('tbody').find('tr').each(function(index,data) {
rowCalc = index+1;
if (rowCalc % 26 == 0){
doc.addPage();
page++;
startRowPosition=startRowPosition+10;
}
rowPosition=(startRowPosition + (rowCalc * 10)) - ((page -1) * 280);
$(this).filter(':visible').find('td').each(function(index,data) {
if ($(this).css('display') != 'none'){
if(defaults.ignoreColumn.indexOf(index) == -1){
var colPosition = startColPosition+ (index * 70);
doc.text(colPosition,rowPosition, parseString($(this)));
}
}
});
});
// Output as Data URI
doc.output('datauri');
}
在这里,我改变两个位置:-在//标题行下---
var colPosition = startColPosition+ (index * 70);
Previously it was 50,based on words length content in table u change.
之后,您需要在另一个位置更改相同的值://在行对列行下-
var colPosition = startColPosition+ (index * 70);
这里也从50变为70,
默认情况下,tableEXport.js的代码低于一个:
else if(defaults.type == 'pdf'){
var doc = new jsPDF('p','pt', 'a4', true);
doc.setFontSize(defaults.pdfFontSize);
// Header
var startColPosition=defaults.pdfLeftMargin;
$(el).find('thead').find('tr').each(function() {
$(this).filter(':visible').find('th').each(function(index,data) {
if ($(this).css('display') != 'none'){
if(defaults.ignoreColumn.indexOf(index) == -1){
var colPosition = startColPosition+ (index * 50);
doc.text(colPosition,20, parseString($(this)));
}
}
});
});
// Row Vs Column
var startRowPosition = 20; var page =1;var rowPosition=0;
$(el).find('tbody').find('tr').each(function(index,data) {
rowCalc = index+1;
if (rowCalc % 26 == 0){
doc.addPage();
page++;
startRowPosition=startRowPosition+10;
}
rowPosition=(startRowPosition + (rowCalc * 10)) - ((page -1) * 280);
$(this).filter(':visible').find('td').each(function(index,data) {
if ($(this).css('display') != 'none'){
if(defaults.ignoreColumn.indexOf(index) == -1){
var colPosition = startColPosition+ (index * 50);
doc.text(colPosition,rowPosition, parseString($(this)));
}
}
});
});
// Output as Data URI
doc.output('datauri');
}
注意:-1)该值u应当根据每列单词的单词长度更改为任意值。 2)但两者都应更改为相同的值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.