Tutorial: Descargar cualquier tabla como CSV con Tampermonkey

Introducción

En muchas páginas web —como sistemas de notas escolares, paneles de datos de negocio o reportes internos— los datos se presentan en tablas HTML pero no ofrecen una forma directa de exportarlos. Con este userscript de Tampermonkey puedes:

• Pintar todas las tablas de una página con un borde rojo de 3 pt para identificarlas rápido.
• Añadir un menú contextual (“Download table as CSV”) al hacer clic derecho sobre los encabezados o la primera fila de datos.
• Generar y descargar automáticamente un archivo .csv con el contenido completo de esa tabla.

Es software libre (MIT) y muy sencillo de instalar y usar.

---

🛠️ Requisitos previos

1. Navegador: Chrome, Firefox, Edge u otro compatible.
2. Extensión: Tampermonkey (disponible gratis en todas las tiendas de extensiones).

---

🚀 Instalación del script

1. Instala Tampermonkey en tu navegador.
2. Instala el script de Tampermonkey aca:
   • https://github.com/janunezc/jn-tm-table-download-as-csv/raw/refs/heads/master/jn-tm-table-csv-downloader.user.js

A partir de ese momento, cada vez que cargues una página con tablas, Tampermonkey ejecutará el script.

---

📋 ¿Cómo funciona por dentro?

1. Bloque de metadata

// ==UserScript==
// @name         Table to CSV Downloader (Custom Context Menu)
// @namespace    https://github.com/janunezc/jn-tm-table-download-as-csv
// @version      3.0
// @description  Open-source: Download table as CSV via a custom context menu, paint tables with inline red borders, and run once page & network are idle.
// @author       José Ángel Núñez Chaves
// @match        *://*/*
// @grant        GM_addStyle
// @homepageURL  https://github.com/janunezc/jn-tm-table-download-as-csv
// @supportURL   https://github.com/janunezc/jn-tm-table-download-as-csv/issues
// @license      MIT
// @updateURL    https://github.com/janunezc/jn-tm-table-download-as-csv/raw/main/tampermonkeyjn-tm-table-csv-downloader.user.js
// ==/UserScript==

Define dónde y cuándo se ejecuta (todas las URLs), qué permisos usa (inyección CSS) y enlaza al repositorio.

2. Inyección de estilos

Con GM_addStyle se crea un menú flotante <ul> muy ligero, con estilos para el fondo blanco, borde y efecto hover en los <li>.

3. Detección de tablas y “network idle”

Al cargarse la página (window.load) y tras 2 segundos sin nueva actividad de red, el script:

1. Encuentra todos los <table>.
2. Les pinta un borde rojo de 3 pt —ideal si hay varias en la página.
3. Elige dónde hacer right-click:
   • Si hay <th>, sobre esos encabezados.
   • Si no, sobre las celdas de la primera fila (<td>).
4. Pinta el texto de esas celdas en rojo para indicar que son interactivas.

4. Menú personalizado y exportación CSV

• Al hacer clic derecho, se previene el menú nativo y se muestra nuestro menú en la posición del cursor.
• Cuando el usuario pulsa “Download table as CSV”, el script:
  1. Recorre todas las filas y celdas.
  2. Escapa las comillas dobles (" → "") y las encierra entre comillas.
  3. Genera un Blob tipo text/csv y simula un <a download> para lanzar la descarga.
  4. El fichero se llama table-AAAA-MM-DDTHH:MM:SS.csv, con timestamp ISO sin separadores.

---

🎥 Ejemplo de uso

1. Ve a una página con tablas (p.ej. tu sistema de calificaciones).
2. Verás los bordes rojos y los encabezados (o fila 0) en texto rojo.
3. Haz clic derecho sobre uno de esos encabezados:
   • Debería aparecer el menú “Download table as CSV”.
4. Pulsa la opción y llega el diálogo de descarga con el CSV listo para importar en Excel, LibreOffice Calc o cualquier herramienta de análisis.

---

✅ Conclusión

Este userscript te ahorra tiempo al exportar datos de cualquier tabla HTML, sin depender de funciones de exportación nativas. Al ser open-source y de licencia MIT, puedes adaptarlo, contribuir o integrarlo en tus proyectos.

¡Pruébalo hoy y lleva tus datos web al CSV con un solo clic derecho!