Экспорт данных в excel stripHtml не работает
Я добавил кнопку экспорта данных в таблицу данных. В этой таблице некоторые столбцы содержат HTML-теги, например
<button data-toggle = "dropdown" class = "btn btn-primary dropdown-toggle btn-xs">BUTTON NAME</button>
Когда я впервые добавил кнопку экспорта, она работала нормально, и строки с HTML-тегами экспортировались без таких тегов, как: BUTTON NAME. Но затем мне пришлось включить функцию замены в мой код кнопки следующим образом:
buttons: [
{
extend: "excelHtml5",
exportOptions: {
format: {
body: function (data, row, column, node) {
return column === 18 ? data.replace(",", ".") : data;
},
},
},
tag: "img",
className: "btn-excel",
title: "file_title",
titleAttr: "Excel",
attr: {
src: "../images/menu_img/excel.ico",
},
action: newexportaction,
},
];
Когда я добавляю этот атрибут exportOptions, строки с тегами HTML начинают появляться с их тегами в экспортируемых файлах Excel. Столбец, который я пытаюсь заменить, не имеет тега html, все они находятся в каком-то другом столбце, но это изменение каким-то образом влияет на них.
Я попытался добавить «stripHtml: false», но это не помогло. Я также пытался написать функцию замены с операторами switch case, но это тоже не сработало.
Привет, я тоже пробовал, но не повезло ..
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Когда вы используете функцию format для кнопки экспорта в Excel, DataTables заполняет свой параметр data необработанными данными из каждой ячейки DataTable. Итак, эти необработанные данные — это полный HTML-контент для вашей кнопки BUTTON NAME.
Точнее, вы получаете innerHtml каждой ячейки. Смотрите также здесь.
Вот почему некоторые другие опции, такие как stripHtml: true, больше не действуют.
Вы можете выполнить эквивалентный шаг stripHtml (в вашем конкретном случае), используя параметр node вместо параметра data и получив доступ к innerText узла с помощью JavaScript:
body: function (data, row, column, node) {
if (column === 5) {
return data.replace(",", ".");
} else if ( column === 3) {
return node.innerText;
} else {
return data;
}
}
Мой вывод в Excel:
Вот мой полный тестовый пример, чтобы вы могли увидеть исходные данные:
<!doctype html>
<html>
<head>
<meta charset = "UTF-8">
<title>Demo</title>
<link href = "https://cdn.datatables.net/1.13.4/css/jquery.dataTables.css" rel = "stylesheet"/>
<link href = "https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.css" rel = "stylesheet"/>
<script src = "https://code.jquery.com/jquery-3.6.0.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src = "https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>
<script src = "https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.js"></script>
<script src = "https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.js"></script>
<link rel = "stylesheet" type = "text/css" href = "https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style = "margin: 20px;">
<table id = "example" class = "display dataTable cell-border" style = "width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office in Country</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button data-toggle = "dropdown" class = "btn btn-primary dropdown-toggle btn-xs">BUTTON NAME</button></td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td><button data-toggle = "dropdown" class = "btn btn-primary dropdown-toggle btn-xs">BUTTON NAME</button></td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'excelHtml5',
exportOptions: {
stripHtml: true,
format: {
body: function (data, row, column, node) {
if (column === 5) {
return data.replace(",", ".");
} else if ( column === 3) {
return node.innerText;
} else {
return data;
}
}
}
}
}
]
} );
} );
</script>
</body>
</html>
«Я пытался добавить 'stripHtml: false', но это не помогло». - ну во всяком случае, вы должны добавить это с
true. В документации сказано, что true уже было по умолчанию, но я не могу сказать, не перезаписывает лиextend: "excelHtml5"это здесь каким-то образом.