csv.html

---
layout: generator
title: "CSV Generator"
subtitle: "Generate CSV with custom configuration"
tab_id: "CSV"
generator_script: "/js/generators/csv.js"
redirect_from:
    - /csv.html
---

<h2 class="text-2xl font-bold mb-4">CSV Generator</h2>
<form id="form-csv" class="space-y-4">
    <div class="form-control">
        <label class="label">
            <span class="label-text">Number of Columns</span>
        </label>
        <input
            type="number"
            name="columns"
            value="5"
            min="1"
            class="input input-bordered w-full"
            required
        />
    </div>

    <div class="form-control">
        <label class="label">
            <span class="label-text">Number of Rows</span>
        </label>
        <input
            type="number"
            name="rows"
            value="10"
            min="1"
            class="input input-bordered w-full"
        />
        <label class="label">
            <span class="label-text-alt">Disabled if size is specified</span>
        </label>
    </div>

    <div class="divider">OR</div>

    <div class="form-control">
        <label class="label">
            <span class="label-text">Target Size (Optional)</span>
        </label>
        <div class="flex flex-col sm:flex-row gap-2">
            <input
                type="number"
                name="size"
                min="0"
                step="0.01"
                class="input input-bordered"
                placeholder="Leave empty to use rows"
            />
            <select name="sizeUnit" class="select select-bordered">
                <option value="KB">KB</option>
                <option value="MB">MB</option>
            </select>
        </div>
    </div>

    <button type="submit" class="btn btn-primary w-full">
        Generate & Download
    </button>
</form>

<script>
    document
        .getElementById("form-csv")
        .addEventListener("submit", async (e) => {
            e.preventDefault();
            const formData = new FormData(e.target);
            const config = {
                columns: parseInt(formData.get("columns")),
                rows: parseInt(formData.get("rows")) || null,
                size: formData.get("size")
                    ? parseFloat(formData.get("size"))
                    : null,
                sizeUnit: formData.get("sizeUnit"),
            };

            try {
                const blob = await generateCSV(config);
                logToUI("Preparing file...");
                const shareTitle = config.size
                    ? `CSV ${config.columns} columns ${config.size} ${config.sizeUnit}`
                    : `CSV ${config.columns} columns ${config.rows} rows`;
                const filename = config.size
                    ? `CSV_${config.columns}_columns_${config.size}_${config.sizeUnit}.csv`
                    : `CSV_${config.columns}_columns_${config.rows}_rows.csv`;
                const result = await downloadOrShareFile(blob, filename, "csv", shareTitle);
                if (result.method === 'download') {
                    logToUI("✓ Download complete!");
                }

                // Track in Google Analytics
                gtag("event", "generate_csv", {
                    event_category: "file_generation",
                    event_label: "csv",
                    columns: config.columns,
                    rows: config.rows || "size_based",
                    has_size: config.size ? "yes" : "no",
                });
            } catch (error) {
                logToUI(`❌ Error: ${error.message}`);
                showError("CSV generation failed: " + error.message);
                hideProgress();
            }
        });

    // Mutual exclusion logic
    const csvSizeInput = document.querySelector('input[name="size"]');
    const csvRowsInput = document.querySelector('input[name="rows"]');

    csvSizeInput.addEventListener("input", (e) => {
        if (e.target.value) {
            csvRowsInput.disabled = true;
            csvRowsInput.value = "";
        } else {
            csvRowsInput.disabled = false;
            csvRowsInput.value = 10;
        }
    });

    csvRowsInput.addEventListener("input", (e) => {
        if (e.target.value) {
            csvSizeInput.disabled = true;
            csvSizeInput.value = "";
        } else {
            csvSizeInput.disabled = false;
        }
    });
</script>