Preventing browser unresponsive timeout when exporting large table to Excel.
Preventing browser unresponsive timeout when exporting large table to Excel.
Oscarmeyer
Posts: 2Questions: 1Answers: 0
Hey all,
I am currently playing around with the export to excel, pdf, cvs, ect plugin for DataTables for a POC. I tried creating a table with 2000 rows and the exporting it to excel. While it does work, the browser thinks the page has become unresponsive, and it tries to kill the page. Is there anyway to prevent this? I'd like to just display a loading dialog or spinner while writing the file, but I can't find any pre or post function callbacks to support this functionality, but I could just be missing it. Code below, to save time I have JavaScript add the 2,000 rows once the 'Add Rows!' button is clicked:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.flash.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.print.min.js"></script>
</head>
<script type="text/javascript">
var count = 1;
$(document).ready(function() {
var table = $('#example').dataTable( {
"scrollY": "200px",
"scrollX": true,
"scrollCollapse": false,
"ordering": true,
"order": [[ 3, "asc" ]],
"paging": false,
"dom": 'Bfrtip',
"buttons": [{extend: 'excelHtml5', title: 'POC Filename'},
{extend: 'pdfHtml5', title: 'POC Filename'}],
"filename": 'test.xlsx'
} );
$(window).bind('resize', function () {
table.fnAdjustColumnSizing();
} );
$("#add").click(function(){
for(var i = 0; i<2000; i++){
var row = [count + .1, count + .2, count + .3, count + .4,
count + .5, count + .6, count + .7, count + .8,
count + .9];
var rowNode = $("#example").DataTable().row.add(row).node();
$(rowNode).css('text-align','left');
$(rowNode).attr('id', "row" + count);
count++;
}
$("#example").DataTable().draw();
});
});
</script>
<button type="button" id ="add">Add Rows!</button>
<table id="example" class="display nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
</tr>
</tfoot>
</table>
</html>
This discussion has been closed.
Answers
I found an acceptable answer to this problem. Apparently writing to a csv is much faster than writing to a xlsx, and that can handle much larger loads with out problems.
I tried your example for 20000 rows and it works, but mine doesn't. Want to try to export to CSV.
Can you please share the code to export to CSV for large data?