I’m using DataTables 2.0.6 to list and export data. I am using a customise function to export files.
Everything is OK but there is br tags inside the header and cells of table (between th or td). When I click PDF button the file is coming but where there are br tags, long spaces appear instead of going to the bottom line.
Also, when I look at the codes in Chrome console, it looks like the picture below.
table header cell – th
The exported pdf file looks like below.
pdf file
My html codes:
<code><table class="table table-striped table-bordered border-bottom" style="width:100%"
id="arac-datatable">
<thead>
<tr>
<th>Id</th>
<th class="text-center">
@Html.DisplayNameFor(model => model.Plaka) <br />
@Html.DisplayNameFor(model => model.SaseNo)
</th>
<th class="text-center">
Marka - Model<br />
Model Yılı
</th>
<th class="text-center">
Müşteri
</th>
<th class="text-center">
Durumu
</th>
<th class="text-center">
Şube-<br />
Kaydı Yapan-<br />
Kayıt Tarihi
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
...my cells...
}
</tbody>
</table>
</code>
<code><table class="table table-striped table-bordered border-bottom" style="width:100%"
id="arac-datatable">
<thead>
<tr>
<th>Id</th>
<th class="text-center">
@Html.DisplayNameFor(model => model.Plaka) <br />
@Html.DisplayNameFor(model => model.SaseNo)
</th>
<th class="text-center">
Marka - Model<br />
Model Yılı
</th>
<th class="text-center">
Müşteri
</th>
<th class="text-center">
Durumu
</th>
<th class="text-center">
Şube-<br />
Kaydı Yapan-<br />
Kayıt Tarihi
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
...my cells...
}
</tbody>
</table>
</code>
<table class="table table-striped table-bordered border-bottom" style="width:100%"
id="arac-datatable">
<thead>
<tr>
<th>Id</th>
<th class="text-center">
@Html.DisplayNameFor(model => model.Plaka) <br />
@Html.DisplayNameFor(model => model.SaseNo)
</th>
<th class="text-center">
Marka - Model<br />
Model Yılı
</th>
<th class="text-center">
Müşteri
</th>
<th class="text-center">
Durumu
</th>
<th class="text-center">
Şube-<br />
Kaydı Yapan-<br />
Kayıt Tarihi
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
...my cells...
}
</tbody>
</table>
My js codes:
<code>$('#arac-datatable').DataTable({
dom: 'Bfrtip',
fixedHeader: true,
paging: true,
pageLength: 50,
order: [[0, 'desc']],
ordering: true,
buttons: {
dom: {
button: {
tag: 'button',
className: ''
}
},
buttons: [{
extend: 'pdfHtml5',
className: 'btn btn-sm btn-warning',
titleAttr: 'PDF Olarak İndir',
text: '<i class="fa fa-file-pdf-o"></i> PDF',
filename: 'pdf-export',
extension: '.pdf',
exportOptions: {
columns: [1, 2, 3, 4],
search: 'applied',
order: 'applied'
},
customize: function (doc) {
doc.content.splice(0, 1);
doc.pageMargins = [40, 80, 40, 40];
doc.defaultStyle.fontSize = 10;
doc.styles.tableHeader.fontSize = 10;
doc.content[0].table.widths = ['20%', '30%', '30%', '20%'];
doc.styles.tableHeader = {
color: 'navy',
alignment: 'center'
};
doc['header'] = (function () {
return {
columns: [
{
image: logo
},
{
alignment: 'center',
italics: true,
text: dtableheaderorta,
fontSize: 18,
margin: [10, 0],
width:400
},
{
alignment: 'right',
fontSize: 10,
text: dtableheadersag
}
],
margin: 30
}
});
doc['footer'] = (function (page, pages) {
return {
columns: [
{
alignment: 'left',
text: dtablefootersol
},
{
alignment: 'right',
text: ['Sayfa ', { text: page.toString() }, ' / ', { text: pages.toString() }]
}
],
margin: [30, 0]
}
});
for (var x = 2; x < doc.content[0].table.body.length; x+=2) {
doc.content[0].table.body[x].forEach(function (h) {
h.fillColor = dtableRowEvenBg;
});
}
var objLayout = {};
objLayout['width'] = function (i) { return 800; };
objLayout['hLineWidth'] = function (i) { return .5; };
objLayout['vLineWidth'] = function (i) { return .5; };
objLayout['hLineColor'] = function (i) { return '#aaa'; };
objLayout['vLineColor'] = function (i) { return '#aaa'; };
objLayout['paddingLeft'] = function (i) { return 4; };
objLayout['paddingRight'] = function (i) { return 4; };
doc.content[0].layout = objLayout;
}
},
{
extend: 'excel',
className: 'btn btn-sm btn-success',
titleAttr: 'Excel Tablosu İndir',
text: '<i class="fa fa-file-excel-o"></i> EXCEL',
filename: 'excel-export',
extension: '.xlsx',
exportOptions: {
columns: [1, 2, 3, 4],
search: 'applied',
order: 'applied'
}
},
{
extend: 'csv',
className: 'btn btn-sm btn-success',
titleAttr: 'Excel CSV Formatı.',
text: '<i class="fa fa-file-excel-o"></i> CSV',
filename: 'csv-excel-export',
extension: '.csv',
exportOptions: {
columns: [1, 2, 3, 4],
search: 'applied',
order: 'applied'
}
},
{
extend: 'copy',
className: 'btn btn-sm btn-light',
titleAttr: 'Tabloyu Kopyala',
text: '<i class="fa fa-copy"></i> Kopyala',
exportOptions: {
columns: [1, 2, 3, 4],
search: 'applied',
order: 'applied',
}
},
{
extend: 'print',
className: 'btn btn-sm btn-dark',
titleAttr: 'Tabloyu Yazdır',
text: '<i class="fa fa-print"></i> Yazdır',
exportOptions: {
columns: [1, 2, 3, 4],
search: 'applied',
order: 'applied',
}
}]
},
language: {
url: dtableLangUrl
},
columnDefs: [
{
target: 0,
visible: false,
searchable: false
}
]
});
</code>
<code>$('#arac-datatable').DataTable({
dom: 'Bfrtip',
fixedHeader: true,
paging: true,
pageLength: 50,
order: [[0, 'desc']],
ordering: true,
buttons: {
dom: {
button: {
tag: 'button',
className: ''
}
},
buttons: [{
extend: 'pdfHtml5',
className: 'btn btn-sm btn-warning',
titleAttr: 'PDF Olarak İndir',
text: '<i class="fa fa-file-pdf-o"></i> PDF',
filename: 'pdf-export',
extension: '.pdf',
exportOptions: {
columns: [1, 2, 3, 4],
search: 'applied',
order: 'applied'
},
customize: function (doc) {
doc.content.splice(0, 1);
doc.pageMargins = [40, 80, 40, 40];
doc.defaultStyle.fontSize = 10;
doc.styles.tableHeader.fontSize = 10;
doc.content[0].table.widths = ['20%', '30%', '30%', '20%'];
doc.styles.tableHeader = {
color: 'navy',
alignment: 'center'
};
doc['header'] = (function () {
return {
columns: [
{
image: logo
},
{
alignment: 'center',
italics: true,
text: dtableheaderorta,
fontSize: 18,
margin: [10, 0],
width:400
},
{
alignment: 'right',
fontSize: 10,
text: dtableheadersag
}
],
margin: 30
}
});
doc['footer'] = (function (page, pages) {
return {
columns: [
{
alignment: 'left',
text: dtablefootersol
},
{
alignment: 'right',
text: ['Sayfa ', { text: page.toString() }, ' / ', { text: pages.toString() }]
}
],
margin: [30, 0]
}
});
for (var x = 2; x < doc.content[0].table.body.length; x+=2) {
doc.content[0].table.body[x].forEach(function (h) {
h.fillColor = dtableRowEvenBg;
});
}
var objLayout = {};
objLayout['width'] = function (i) { return 800; };
objLayout['hLineWidth'] = function (i) { return .5; };
objLayout['vLineWidth'] = function (i) { return .5; };
objLayout['hLineColor'] = function (i) { return '#aaa'; };
objLayout['vLineColor'] = function (i) { return '#aaa'; };
objLayout['paddingLeft'] = function (i) { return 4; };
objLayout['paddingRight'] = function (i) { return 4; };
doc.content[0].layout = objLayout;
}
},
{
extend: 'excel',
className: 'btn btn-sm btn-success',
titleAttr: 'Excel Tablosu İndir',
text: '<i class="fa fa-file-excel-o"></i> EXCEL',
filename: 'excel-export',
extension: '.xlsx',
exportOptions: {
columns: [1, 2, 3, 4],
search: 'applied',
order: 'applied'
}
},
{
extend: 'csv',
className: 'btn btn-sm btn-success',
titleAttr: 'Excel CSV Formatı.',
text: '<i class="fa fa-file-excel-o"></i> CSV',
filename: 'csv-excel-export',
extension: '.csv',
exportOptions: {
columns: [1, 2, 3, 4],
search: 'applied',
order: 'applied'
}
},
{
extend: 'copy',
className: 'btn btn-sm btn-light',
titleAttr: 'Tabloyu Kopyala',
text: '<i class="fa fa-copy"></i> Kopyala',
exportOptions: {
columns: [1, 2, 3, 4],
search: 'applied',
order: 'applied',
}
},
{
extend: 'print',
className: 'btn btn-sm btn-dark',
titleAttr: 'Tabloyu Yazdır',
text: '<i class="fa fa-print"></i> Yazdır',
exportOptions: {
columns: [1, 2, 3, 4],
search: 'applied',
order: 'applied',
}
}]
},
language: {
url: dtableLangUrl
},
columnDefs: [
{
target: 0,
visible: false,
searchable: false
}
]
});
</code>
$('#arac-datatable').DataTable({
dom: 'Bfrtip',
fixedHeader: true,
paging: true,
pageLength: 50,
order: [[0, 'desc']],
ordering: true,
buttons: {
dom: {
button: {
tag: 'button',
className: ''
}
},
buttons: [{
extend: 'pdfHtml5',
className: 'btn btn-sm btn-warning',
titleAttr: 'PDF Olarak İndir',
text: '<i class="fa fa-file-pdf-o"></i> PDF',
filename: 'pdf-export',
extension: '.pdf',
exportOptions: {
columns: [1, 2, 3, 4],
search: 'applied',
order: 'applied'
},
customize: function (doc) {
doc.content.splice(0, 1);
doc.pageMargins = [40, 80, 40, 40];
doc.defaultStyle.fontSize = 10;
doc.styles.tableHeader.fontSize = 10;
doc.content[0].table.widths = ['20%', '30%', '30%', '20%'];
doc.styles.tableHeader = {
color: 'navy',
alignment: 'center'
};
doc['header'] = (function () {
return {
columns: [
{
image: logo
},
{
alignment: 'center',
italics: true,
text: dtableheaderorta,
fontSize: 18,
margin: [10, 0],
width:400
},
{
alignment: 'right',
fontSize: 10,
text: dtableheadersag
}
],
margin: 30
}
});
doc['footer'] = (function (page, pages) {
return {
columns: [
{
alignment: 'left',
text: dtablefootersol
},
{
alignment: 'right',
text: ['Sayfa ', { text: page.toString() }, ' / ', { text: pages.toString() }]
}
],
margin: [30, 0]
}
});
for (var x = 2; x < doc.content[0].table.body.length; x+=2) {
doc.content[0].table.body[x].forEach(function (h) {
h.fillColor = dtableRowEvenBg;
});
}
var objLayout = {};
objLayout['width'] = function (i) { return 800; };
objLayout['hLineWidth'] = function (i) { return .5; };
objLayout['vLineWidth'] = function (i) { return .5; };
objLayout['hLineColor'] = function (i) { return '#aaa'; };
objLayout['vLineColor'] = function (i) { return '#aaa'; };
objLayout['paddingLeft'] = function (i) { return 4; };
objLayout['paddingRight'] = function (i) { return 4; };
doc.content[0].layout = objLayout;
}
},
{
extend: 'excel',
className: 'btn btn-sm btn-success',
titleAttr: 'Excel Tablosu İndir',
text: '<i class="fa fa-file-excel-o"></i> EXCEL',
filename: 'excel-export',
extension: '.xlsx',
exportOptions: {
columns: [1, 2, 3, 4],
search: 'applied',
order: 'applied'
}
},
{
extend: 'csv',
className: 'btn btn-sm btn-success',
titleAttr: 'Excel CSV Formatı.',
text: '<i class="fa fa-file-excel-o"></i> CSV',
filename: 'csv-excel-export',
extension: '.csv',
exportOptions: {
columns: [1, 2, 3, 4],
search: 'applied',
order: 'applied'
}
},
{
extend: 'copy',
className: 'btn btn-sm btn-light',
titleAttr: 'Tabloyu Kopyala',
text: '<i class="fa fa-copy"></i> Kopyala',
exportOptions: {
columns: [1, 2, 3, 4],
search: 'applied',
order: 'applied',
}
},
{
extend: 'print',
className: 'btn btn-sm btn-dark',
titleAttr: 'Tabloyu Yazdır',
text: '<i class="fa fa-print"></i> Yazdır',
exportOptions: {
columns: [1, 2, 3, 4],
search: 'applied',
order: 'applied',
}
}]
},
language: {
url: dtableLangUrl
},
columnDefs: [
{
target: 0,
visible: false,
searchable: false
}
]
});
I tried lots of things. For example:
<code>var rowsss = doc.content[0].table.body;
for (i = 0; i < rowsss.length; i++) {
/*for (var j = 0; j < rowsss.columns.length; j++) {
}*/
rowsss[i][1].text = rowsss[i][1].text.replace('t', 'n');
rowsss[i][1].text = rowsss[i][1].text.replace('r', 'n');
rowsss[i][1].text = rowsss[i][1].text.replace('<br/>', 'n');
rowsss[i][1].text = rowsss[i][1].text.replace('<br>', 'n');
rowsss[i][1].text = rowsss[i][1].text.replace('<br />', 'n');
}
</code>
<code>var rowsss = doc.content[0].table.body;
for (i = 0; i < rowsss.length; i++) {
/*for (var j = 0; j < rowsss.columns.length; j++) {
}*/
rowsss[i][1].text = rowsss[i][1].text.replace('t', 'n');
rowsss[i][1].text = rowsss[i][1].text.replace('r', 'n');
rowsss[i][1].text = rowsss[i][1].text.replace('<br/>', 'n');
rowsss[i][1].text = rowsss[i][1].text.replace('<br>', 'n');
rowsss[i][1].text = rowsss[i][1].text.replace('<br />', 'n');
}
</code>
var rowsss = doc.content[0].table.body;
for (i = 0; i < rowsss.length; i++) {
/*for (var j = 0; j < rowsss.columns.length; j++) {
}*/
rowsss[i][1].text = rowsss[i][1].text.replace('t', 'n');
rowsss[i][1].text = rowsss[i][1].text.replace('r', 'n');
rowsss[i][1].text = rowsss[i][1].text.replace('<br/>', 'n');
rowsss[i][1].text = rowsss[i][1].text.replace('<br>', 'n');
rowsss[i][1].text = rowsss[i][1].text.replace('<br />', 'n');
}
but anything worked.