0

I have a handsontable with just under 100 rows of data, and 9 columns. I added a button to directly export the data in the handsontable to Excel. The button functionality works, and when clicked it will download an Excel file that can be opened. This file has all of the proper formatting, but it only contains 30-40 rows of the data in the handsontable. Scrolling down in the table before clicking the export button will result in a few more rows in the result, but it never returns all of the data.

The relevant jquery code can be seen here:

var tableContainer = document.getElementById('table');
tableHandson = new Handsontable(tableContainer, {
    minSpareRows: 0,
    columnSorting: true,
    stretchH: 'all',
    readOnly: true
});
//ajax call to get data and then load it is here.
$(window).load(function() {
$("#btnExport").click(function(e) {
    window.open('data:application/vnd.ms-excel,' + encodeURIComponent($('#table').html()));
    e.preventDefault();
});
});

.text() also only returns the same limited amount of data that .html is returning here.

Paul Abbott
  • 7,065
  • 3
  • 27
  • 45
mshard
  • 1
  • 1

2 Answers2

0

It looks like you are trying to send the content via the URL?

There is a usually a maximum length on the amount of characters you can supply for a URL and it's generally dependent upon the browser.

You can find a more detailed overview of the constraints here:

What is the maximum length of a URL in different browsers?

Can you post the data to the page instead and have some server side code handle outputting the data with the correct content type?

Community
  • 1
  • 1
Christopher Thomas
  • 382
  • 1
  • 15
0

What you are seeing is the virtual rendering that HOT uses to speed up table performance. You can read more about it in these other SO answers:

Virtual Rendering Browser "find" not working IE performance and VR

See what you're doing is trying to grab the data off of the DOM which you shouldn't be doing. This will cause only the viewport to be returned. Instead, you should parse your own data using the hot.getData() method.

Community
  • 1
  • 1
ZekeDroid
  • 7,089
  • 5
  • 33
  • 59
  • Thanks for that link. This makes sense. However, I have not been successful in any of my attempts to replace the .html() portion of the above code with tableHandson.getData(). It does not work on its own, or inside the encodeURIComponent() function. Any suggestions? – mshard Nov 09 '15 at 15:41
  • Well of course not. You can't just open it that way since what you're getting back is your data object (which you should be passing in by the way). What exactly are you trying to do? If you're wanting to download your data as a 'csv' file, then there are other steps you need to take to properly format your data, all highly dependent on what that object looks like. – ZekeDroid Nov 09 '15 at 16:47
  • I'm trying to take the contents of the handsontable and display them in Excel. This could mean saving the contents as a csv or any other method. With the .html(), a file is downloaded which opens in Excel with the data and the table formatting. The formatting isn't necessary though. – mshard Nov 09 '15 at 18:28
  • Yeah so I would recommend you console log the output of `hot.getData()` and look at other SO answers for "How to export json data to CSV". – ZekeDroid Nov 09 '15 at 19:17