csv-to-labels

CSV Label Generator

This is a simple web application that generates labels from a CSV file and displays them on a canvas. You can then download the generated labels as a PNG image or a PDF document.

csv-to-labels

gurukul-lables-printing

Features

Prerequisites

Usage

  1. HTML Structure: 
    <!DOCTYPE html>
<html>
<head>
    <title>CSV Label Generator</title>
    <script src="[https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js](https://www.google.com/search?q=https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js)"></script>
    <script src="[https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js](https://www.google.com/search?q=https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js)"></script>
</head>
<body>
    <input type="file" id="csvFile" accept=".csv">
    <canvas id="labelsCanvas" width="900" height="1200" style="border:1px solid #000;"></canvas>
    <button onclick="downloadCanvas()">Download PNG</button>
    <button onclick="downloadPDF()">Download PDF</button>

    <script src="script.js"></script>
</body>
</html>
    • Ensure that the PapaParse and jsPDF libraries are included.
    • The canvas element is where the labels will be drawn.
    • The buttons initiate the download functions.
    • The script.js file contains the javascript code.
  2. JavaScript (script.js): 
    document.getElementById("csvFile").addEventListener("change", handleFileUpload);

function handleFileUpload(event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function (e) {
        Papa.parse(e.target.result, {
            complete: function (results) {
                drawLabels(results.data);
            },
        });
    };
    reader.readAsText(file);
}

function drawLabels(data) {
    const canvas = document.getElementById("labelsCanvas");
    const ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "black";
    ctx.font = "90px Arial";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";

    const columns = 3;
    const rows = 8;
    const labelWidth = canvas.width / columns;
    const labelHeight = canvas.height / rows;
    const maxLineWidth = labelWidth * 0.9;

    data.forEach((row, index) => {
        let col = index % columns;
        let rowNum = Math.floor(index / columns);

        if (rowNum >= rows) return;

        let x = col * labelWidth + labelWidth / 2;
        let y = rowNum * labelHeight + labelHeight / 2;

        let text = Object.values(row).join(" ");
        let lines = wrapText(ctx, text, maxLineWidth);

        let lineHeight = 80;
        let startY = y - (lines.length - 1) * lineHeight / 2;

        lines.forEach((line, i) => {
            ctx.fillText(line, x, startY + i * lineHeight);
        });
    });
}

function wrapText(ctx, text, maxWidth) {
    let words = text.split(" ");
    let lines = [];
    let currentLine = "";

    words.forEach(word => {
        let testLine = currentLine ? currentLine + " " + word : word;
        let testWidth = ctx.measureText(testLine).width;

        if (testWidth > maxWidth) {
            lines.push(currentLine);
            currentLine = word;
        } else {
            currentLine = testLine;
        }
    });

    if (currentLine) lines.push(currentLine);
    return lines;
}

function downloadCanvas() {
    const canvas = document.getElementById("labelsCanvas");
    const link = document.createElement("a");
    link.download = "labels.png";
    link.href = canvas.toDataURL("image/png");
    link.click();
}

function downloadPDF() {
    const { jsPDF } = window.jspdf;
    const pdf = new jsPDF("p", "mm", "a4");
    const canvas = document.getElementById("labelsCanvas");

    const imgData = canvas.toDataURL("image/png");
    pdf.addImage(imgData, "PNG", 0, 0, 210, 297);
    pdf.save("labels.pdf");
}
  3. Upload CSV:
    • Open the HTML file in your web browser.
    • Click the “Choose File” button and select your CSV file.
  4. View Labels:
    • The labels will be generated and displayed on the canvas.
  5. Download:
    • Click the “Download PNG” button to download the labels as a PNG image.
    • Click the “Download PDF” button to download the labels as a PDF document.

CSV Format

The CSV file should contain data that you want to display on the labels. Each row in the CSV file will be used to generate a single label. The script joins all values within each row with spaces.

Customization

This site is open source. Improve this page.