Preserve a Leading Zero When Exporting HTML Table To CSV With JavaScript

Question

The following DEMO allows you to export the HTML Table as CSV by clicking "Export to CSV" button.

However, if you look at the exported CSV you'll notice that in the last row:

"00001" get truncated to just "1"

function download_csv(csv, filename) {
    var csvFile;
    var downloadLink;

    // CSV FILE
    csvFile = new Blob([csv], {type: "text/csv"});

    // Download link
    downloadLink = document.createElement("a");

    // File name
    downloadLink.download = filename;

    // We have to create a link to the file
    downloadLink.href = window.URL.createObjectURL(csvFile);

    // Make sure that the link is not displayed
    downloadLink.style.display = "none";

    // Add the link to your DOM
    document.body.appendChild(downloadLink);

    // Lanzamos
    downloadLink.click();
}

function export_table_to_csv(html, filename) {
	var csv = [];
	var rows = document.querySelectorAll("table tr");
	
    for (var i = 0; i < rows.length; i++) {
		var row = [], cols = rows[i].querySelectorAll("td, th");
		
        for (var j = 0; j < cols.length; j++) 
            row.push(cols[j].innerText);
        
		csv.push(row.join(","));		
	}

    // Download CSV
    download_csv(csv.join("\n"), filename);
}

document.querySelector("#button2").addEventListener("click", function () {
    var html = document.querySelector("table").outerHTML;
	export_table_to_csv(html, "table.csv");
});

<table border="1px">
<thead>
	<tr>
	<th>ID</th>
	<th>PROVINCE</th>
	<th>DIVISION</th>	
	<th>NAME</th>
	</tr>
</thead>
<tbody>
	<tr><td>76363</td><td>Province1</td><td>AA</td><td>NAME1</td></tr>
	<tr><td>76371</td><td>Province2</td><td>AB</td><td>NAME2</td></tr>
	<tr><td>76388</td><td>Province3</td><td>AC</td><td>NAME3</td></tr>
	<tr><td>76424</td><td>Province4</td><td>AD</td><td>NAME4</td></tr>
	<tr><td>00001</td><td>undefined</td><td>undefined</td><td>undefined</td> 
</tr>
</tbody>
</table>
			
<button id="button2">Export to CSV</button>

I want to preserve the leading zeroes with any data I might put in the table.

The only way to do that is by adding an apostrophe ' BEFORE the number that starts with 0.

In other words: 00001 will turn to '00001

I am assuming the solution is to add an:

IF <td> starts with 0 add ' statement.

How to do that?

Are you sure that the generated CSV is truncating 0s? Can you open the file in a text editor? On my machine, I would not expect truncation to occur and can confirm it is not happening. innerText just returns a string; it does not know that the contained value is a Number. — jagthebeetle
– jagthebeetle, Commented Dec 28, 2018 at 6:16
You are opening the file in Excel. Check it by opening in notepad. — MD AZAD HUSSAIN
– MD AZAD HUSSAIN, Commented Dec 28, 2018 at 6:20

MD AZAD HUSSAIN · Accepted Answer · 2018-12-28 06:30:28Z

function download_csv(csv, filename) {
    var csvFile;
    var downloadLink;

    // CSV FILE
    csvFile = new Blob([csv], {type: "text/csv"});

    // Download link
    downloadLink = document.createElement("a");

    // File name
    downloadLink.download = filename;

    // We have to create a link to the file
    downloadLink.href = window.URL.createObjectURL(csvFile);

    // Make sure that the link is not displayed
    downloadLink.style.display = "none";

    // Add the link to your DOM
    document.body.appendChild(downloadLink);

    // Lanzamos
    downloadLink.click();
}

function export_table_to_csv(html, filename) {
	var csv = [];
	var rows = document.querySelectorAll("table tr");
	
    for (var i = 0; i < rows.length; i++) {
		var row = [], cols = rows[i].querySelectorAll("td, th");
		
        for (var j = 0; j < cols.length; j++) 
            row.push(cols[j].innerText[0]=='0' ? ("'" + cols[j].innerText) : cols[j].innerText);
        
		csv.push(row.join(","));		
	}

    // Download CSV
    download_csv(csv.join("\n"), filename);
}

document.querySelector("#button2").addEventListener("click", function () {
    var html = document.querySelector("table").outerHTML;
	export_table_to_csv(html, "table.csv");
});

<table border="1px">
<thead>
	<tr>
	<th>ID</th>
	<th>PROVINCE</th>
	<th>DIVISION</th>	
	<th>NAME</th>
	</tr>
</thead>
<tbody>
	<tr><td>76363</td><td>Province1</td><td>AA</td><td>NAME1</td></tr>
	<tr><td>76371</td><td>Province2</td><td>AB</td><td>NAME2</td></tr>
	<tr><td>76388</td><td>Province3</td><td>AC</td><td>NAME3</td></tr>
	<tr><td>76424</td><td>Province4</td><td>AD</td><td>NAME4</td></tr>
	<tr><td>00001</td><td>undefined</td><td>undefined</td><td>undefined</td> 
</tr>
</tbody>
</table>
			
<button id="button2">Export to CSV</button>

Max · Accepted Answer · 2019-09-04 12:30:52Z

0

When opening the file with Excel, or any other tabular type program, the column will be interpreted as a number and leading zeros are removed. If you open the file in raw format though, in Notepad for example, or tell Excel to interpret the column as text, you'll see the leading zeros. People using your exported CSV will probably know this.

answered Sep 4, 2019 at 12:30

Max

75710 silver badges23 bronze badges

Collectives™ on Stack Overflow

Preserve a Leading Zero When Exporting HTML Table To CSV With JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related