Scribd
Upload
51 views

Creacion de Un CSV Desde Tabla HTML 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
51 views

Creacion de Un CSV Desde Tabla HTML 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

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy