QRSave

QRSave.svelte

<script lang="ts">
    import { createQrPngDataUrl } from "@svelte-put/qr";
    import { onMount } from "svelte";
    import JSZip from "jszip";

    const qrs = [
    ];

    let srcs: string[] = [];
    onMount(async () => {
        let _srcs = qrs.map((qr) =>
            createQrPngDataUrl({
                data: qr,
                width: 1000,
                height: 1000,
                backgroundFill: "#fff",
            }),
        );

        srcs = await Promise.all(_srcs);
    });

    function saveAllQRToFile() {
        const zip = new JSZip();
        const dir = zip.folder("qrs")!;
        srcs.forEach((src, i) => {
            dir.file(`qr-${i+1}.png`, src.split("base64,")[1], { base64: true });
        });

        zip.generateAsync({ type: "blob" }).then((content) => {
            const a = document.createElement("a");
            a.href = URL.createObjectURL(content);
            a.download = "qrs.zip";
            a.click();
        });
    }
</script>

<div class="w-full h-full flex flex-col overflow-auto">
    {#if srcs.length !== 0}
        <div class="flex justify-center p-6">
            <button
                class="drop-shadow-mini bg-gradient-to-b from-yellow-300 to-yellow-500 px-4 py-1 rounded-lg font-bold text-blue-800"
                on:click={saveAllQRToFile}
            >
                Save to File
            </button>
        </div>
        <div
            class="flex-1 grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-4"
        >
            {#each srcs as src}
                <img {src} width="180" height="180" alt="a qr code" />
            {/each}
        </div>
    {:else}
        <p>Loading...</p>
    {/if}
</div>