exportar todos los png

2025-10-31 12:31:14 -03:00
parent 11c0abdf0b
commit 06629cc1c0
2 changed files with 20 additions and 1 deletions
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>redmine-api-administracion</title>
    </head>
-    <body data-bs-theme="dark">
+    <body data-bs-theme="light">
        <div id="app"></div>
        <script type="module" src="/src/main.ts"></script>
    </body>
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -33,9 +33,26 @@
        }
        setTimeout(() => {}, 100);
    }
+    async function exportAllToPNG(issues: any[]) {
+        issues.forEach(async (issue) => {
+            const element = document.getElementById(`card-${issue.id}`);
+
+            if (element) {
+                const canvas = await html2canvas(element);
+                const image = canvas.toDataURL("image/png");
+                const link = document.createElement("a");
+                link.download = `issue-${issue.id}.png`;
+                link.href = image;
+                link.click();
+            }
+        });
+    }
 </script>

 <main>
+    <button onclick={() => exportAllToPNG(issues)} class="btn btn-primary mt-3"
+        >Exportar a PNG</button
+    >
    {#if issues.length == 0}
        <p>Cargando...</p>
    {:else}
@@ -43,10 +60,12 @@
            {#each issues as issue}
                <div class="m-2 w-75">
                    <Tarjeta {issue} />
+                    <!--
                    <button
                        onclick={() => exportToPNG(issue)}
                        class="btn btn-primary mt-3">Exportar a PNG</button
                    >
+                    -->
                </div>
            {/each}
        </div>