Сохранить ведущий ноль при экспорте таблицы HTML в CSV с JavaScript

Question

Следующая демонстрационная программа позволяет вам экспортировать таблицу HTML как CSV, нажав кнопку «Экспорт в CSV».

Однако, если вы посмотрите на экспортированный CSV, вы заметите, что в последней строке:

"00001" усекается до "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>

Я хочу сохранить начальные нули с любыми данными, которые я могу поместить в таблицу.

Единственный способ сделать это - добавитьапостроф 'ДО числа, начинающегося с 0.

Другими словами: 00001 превратится в' 00001

Я предполагаю, что решение состоит в добавлении:

IF <td> starts with 0 add ' statement.

Как это сделать?

Answer 1

При открытии файла в Excel или любой другой программе табличного типа столбец будет интерпретироваться как число, а начальные нули удаляются.Если вы откроете файл в необработанном формате, например, в Блокноте или скажете Excel интерпретировать столбец как текст, вы увидите начальные нули.Люди, использующие ваш экспортированный CSV, наверняка знают это.

Answer 2

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>