exportar todos los png

This commit is contained in:
2025-10-31 12:31:14 -03:00
parent 11c0abdf0b
commit 06629cc1c0
2 changed files with 20 additions and 1 deletions

View File

@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>redmine-api-administracion</title> <title>redmine-api-administracion</title>
</head> </head>
<body data-bs-theme="dark"> <body data-bs-theme="light">
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>

View File

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