KEMBAR78
Exportar Tabla HTML a CSV con JS | PDF | Comma Separated Values | Naming Conventions
Scribd
Upload
69 views3 pages

Exportar Tabla HTML a CSV con JS

This document describes how to create a CSV file from an HTML table using JavaScript. It includes the HTML for a sample table and a button to export the table data to CSV. The JavaScript code defines a TableCSVExporter class to parse the table rows and cells, convert them to comma-separated values, and generate a CSV blob that can be downloaded. Clicking the export button calls the csv() function, which uses the TableCSVExporter class to generate the CSV output from the HTML table.

Uploaded by

alexis torres
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
69 views3 pages

Exportar Tabla HTML a CSV con JS

This document describes how to create a CSV file from an HTML table using JavaScript. It includes the HTML for a sample table and a button to export the table data to CSV. The JavaScript code defines a TableCSVExporter class to parse the table rows and cells, convert them to comma-separated values, and generate a CSV blob that can be downloaded. Clicking the export button calls the csv() function, which uses the TableCSVExporter class to generate the CSV output from the HTML table.

Uploaded by

alexis torres
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Creacion de un csv desde tabla html con js

Html

<div class="container-fluid table-responsive">


<table class="table table-hover" id="dataTable">
<thead class="thead-dark text-center">
<thead class="thead-dark text-center">
<th hidden="true">#</th>
<th>Año</th>
<th>No. Empleado</th>
<th>Nombre</th>
<th>RFC</th>
<th>Oficio</th>
<th>Area</th>
<th>Resultado</th>
<th>Dirigido</th>
</thead>
</thead>
<tbody class="text-center" id="datos_cargar"></tbody>
</table>
</div>

<button id="exportar_csv" type="button" class="button">Export to CSV</button>

<script src="./public/js/busqueda_masiva.js"></script>

Js

busqueda = () => {

document.querySelector('#plantilla_busqueda').addEventListener('click', plan
tilla);
document.querySelector('#carga_csv').addEventListener('submit', buscar_datos
);
document.querySelector('#exportar_csv').addEventListener('click', csv);

}
csv = () => {
const dataTable = document.getElementById("dataTable");
const exporter = new TableCSVExporter(dataTable);
const csvOutput = exporter.convertToCSV();
const csvBlob = new Blob([csvOutput], { type: "text/csv" });
const blobUrl = URL.createObjectURL(csvBlob);
const anchorElement = document.createElement("a");

anchorElement.href = blobUrl;
anchorElement.download = "table-export.csv";
anchorElement.click();

setTimeout(() => {
URL.revokeObjectURL(blobUrl);
}, 500);
}

class TableCSVExporter {
constructor(table, includeHeaders = true) {
this.table = table;
this.rows = Array.from(table.querySelectorAll("tr"));

if (!includeHeaders && this.rows[0].querySelectorAll("th").length) {


this.rows.shift();
}
}

convertToCSV() {
const lines = [];
const numCols = this._findLongestRowLength();

for (const row of this.rows) {


let line = "";

for (let i = 0; i < numCols; i++) {


if (row.children[i] !== undefined) {
line += TableCSVExporter.parseCell(row.children[i]);
}

line += (i !== (numCols - 1)) ? "," : "";


}

lines.push(line);
}
return lines.join("\n");
}

_findLongestRowLength() {
return this.rows.reduce((l, row) => row.childElementCount > l ? row.chil
dElementCount : l, 0);
}

static parseCell(tableCell) {
let parsedValue = tableCell.textContent;

// Replace all double quotes with two double quotes


parsedValue = parsedValue.replace(/"/g, `""`);

// If value contains comma, new-line or double-quote, enclose in double


quotes
parsedValue = /[",\n]/.test(parsedValue) ? `"${parsedValue}"` : parsedVa
lue;

return parsedValue;
}
}

You might also like