I am exporting html table as excel with javascript (window.location.href= uri + base64(tableData)) and this is working fine for 1500 rows. Because window.location.href has some limit string length. But i need to export 40000 number of rows.
And i have also tried with an anchor tag href. But it is also not working.
So can we assign the data partially to window.location.href or have any alternate solution?
I am exporting html table as excel with javascript (window.location.href= uri + base64(tableData)) and this is working fine for 1500 rows. Because window.location.href has some limit string length. But i need to export 40000 number of rows.
And i have also tried with an anchor tag href. But it is also not working.
So can we assign the data partially to window.location.href or have any alternate solution?
- i have also tried with anchor tag href. that also not working. So can we assign the data partially to window.location.href or alternate way? – Rakesh Varma Commented Jun 3, 2016 at 7:18
- No way. That big Data you have to up- and download via post Data to and from a Server. – Stefan Brinkmann Commented Jun 3, 2016 at 7:24
- I can understand that window.location.href is GET request type. If i use as POST request that may be can handle more data. But here in my code is only a single page so there is JavaScript and Html page. How to send to server then. – Rakesh Varma Commented Jun 3, 2016 at 7:28
- 10,000 rows x 2 columns will work as .csv file export in firefox. But 100,000 will not. – Paul Commented Jun 3, 2016 at 7:30
- Tried this one, I have not -- perhaps it may function differently ? npmjs./package/export-to-excel – Paul Commented Jun 3, 2016 at 7:35
3 Answers
Reset to default 6I was assigning the encoded string to window.location.href, thats has limitation of size. It works for small data. For large data, we need to change this way, and i used Blob's, Thanks @dandavis. In Blob's there is no limit of data and we can export large size of files. My previous code is :
var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
window.location.href = uri + base64(format(template, ctx))
And now updated code with passing blob is:
var blob = b64toBlob(str, "application/vnd.ms-excel");
var blobUrl = URL.createObjectURL(blob);
window.location = blobUrl;
And the b64toBlob function is here:
function b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, {type: contentType});
return blob;
}
And its working very fine. I have tested with 55,000 number of rows. Thanks all
One way to do that is to create a Blob out of your data, convert it to object URL and set result URL as an anchor href with download attribute set to a file name. An example:
const blob = new Blob(["{a:1,b:2}"])
const blobURL = window.URL.createObjectURL(blob)
document.querySelector('a').setAttribute('href', blobURL)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<a download="example.json">Download</a>
</body>
</html>You obviously should be concerned about whether user browser supports these features.
Update:
Looks like there's a library called excellentexport that does just that.
You can use the excellent FileSaver.js to save data generated on the client side that takes care of browser difference (new tab for safari, msSaveAs for ie/edge and the use of download attribute for those who support it)
saveAs(new Blob([tableData]), 'filename.csv')
There is no need to base64 encode...