Javascript PDF-LIB Tutorial to Convert Raw Text to PDF Document in Browser Web App

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text to PDF Converter</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light p-5">

    <div class="container">
        <div class="card mx-auto p-4 shadow" style="max-width: 600px;">
            <h1 class="text-center fs-3 fw-bold mb-4">Text to PDF Converter</h1>

            <div class="mb-3">
                <label for="text-input" class="form-label">Enter your text:</label>
                <textarea id="text-input" class="form-control" rows="8" placeholder="Type your text here..."></textarea>
            </div>

            <div class="d-grid">
                <button id="download-button" class="btn btn-primary">
                    Download PDF
                </button>
            </div>
        </div>
    </div>

    <!-- Include pdf-lib library from CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>

    <script>
        const textInput = document.getElementById('text-input');
        const downloadButton = document.getElementById('download-button');

        downloadButton.addEventListener('click', async () => {
            const text = textInput.value.trim();
            if (!text) {
                alert('Please enter some text.');
                return;
            }

            // Create a new PDF document
            const { PDFDocument, StandardFonts, rgb } = PDFLib;
            const pdfDoc = await PDFDocument.create();
            const page = pdfDoc.addPage([595.28, 841.89]); // A4 size in points (mm * 72 / 25.4)
            const { width, height } = page.getSize();

            // Set font size and load the standard font
            const fontSize = 12;
            const margin = 40;
            const textWidth = width - margin * 2;

            // Load the standard font (Helvetica)
            const font = await pdfDoc.embedFont(StandardFonts.Helvetica);

            // Split the text to fit within the page's width
            const lines = splitTextToFitWidth(font, text, textWidth, fontSize);

            // Write the text starting from the top left corner
            let y = height - margin;
            lines.forEach((line) => {
                if (y < margin) {
                    page = pdfDoc.addPage([595.28, 841.89]); // Add new page if space runs out
                    y = height - margin;
                }
                page.drawText(line, { x: margin, y, size: fontSize, font, color: rgb(0, 0, 0) });
                y -= fontSize + 5; // Move to the next line (5 points for line spacing)
            });

            // Serialize the PDFDocument to bytes (a Uint8Array)
            const pdfBytes = await pdfDoc.save();

            // Create a Blob and trigger download
            const blob = new Blob([pdfBytes], { type: 'application/pdf' });
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = 'text_to_pdf.pdf';
            link.click();
        });

        // Function to split text into lines that fit within the specified width
        function splitTextToFitWidth(font, text, maxWidth, fontSize) {
            const words = text.split(' ');
            let lines = [];
            let currentLine = '';

            words.forEach((word) => {
                const testLine = currentLine + word + ' ';
                const testLineWidth = font.widthOfTextAtSize(testLine, fontSize); // Correct way to measure text width
                if (testLineWidth > maxWidth) {
                    lines.push(currentLine);
                    currentLine = word + ' ';
                } else {
                    currentLine = testLine;
                }
            });

            lines.push(currentLine); // Add the last line
            return lines;
        }
    </script>

</body>
</html>

100

101

102

103

104

<!DOCTYPE html>

<head>

<title>Text to PDF Converter</title>

</head>

<h1 class="text-center fs-3 fw-bold mb-4">Text to PDF Converter</h1>

<label for="text-input" class="form-label">Enter your text:</label>

</div>

Download PDF

</button>

</div>

const textInput = document.getElementById('text-input');

const downloadButton = document.getElementById('download-button');

downloadButton.addEventListener('click', async () => {

const text = textInput.value.trim();

if (!text) {

alert('Please enter some text.');

return;

}

// Create a new PDF document

const { PDFDocument, StandardFonts, rgb } = PDFLib;

const pdfDoc = await PDFDocument.create();

const page = pdfDoc.addPage([595.28, 841.89]); // A4 size in points (mm * 72 / 25.4)

const { width, height } = page.getSize();

// Set font size and load the standard font

const fontSize = 12;

const margin = 40;

const textWidth = width - margin * 2;

// Load the standard font (Helvetica)

const font = await pdfDoc.embedFont(StandardFonts.Helvetica);

// Split the text to fit within the page's width

const lines = splitTextToFitWidth(font, text, textWidth, fontSize);

// Write the text starting from the top left corner

let y = height - margin;

lines.forEach((line) => {

if (y < margin) {

page = pdfDoc.addPage([595.28, 841.89]); // Add new page if space runs out

y = height - margin;

}

page.drawText(line, { x: margin, y, size: fontSize, font, color: rgb(0, 0, 0) });

y -= fontSize + 5; // Move to the next line (5 points for line spacing)

});

// Serialize the PDFDocument to bytes (a Uint8Array)

const pdfBytes = await pdfDoc.save();

// Create a Blob and trigger download

const blob = new Blob([pdfBytes], { type: 'application/pdf' });

const link = document.createElement('a');

link.href = URL.createObjectURL(blob);

link.download = 'text_to_pdf.pdf';

link.click();

});

// Function to split text into lines that fit within the specified width

function splitTextToFitWidth(font, text, maxWidth, fontSize) {

const words = text.split(' ');

let lines = [];

let currentLine = '';

words.forEach((word) => {

const testLine = currentLine + word + ' ';

const testLineWidth = font.widthOfTextAtSize(testLine, fontSize); // Correct way to measure text width

if (testLineWidth > maxWidth) {

lines.push(currentLine);

currentLine = word + ' ';

} else {

currentLine = testLine;

}

});

lines.push(currentLine); // Add the last line

return lines;

}

</script>

</body>

</html>

Javascript PDF-LIB Tutorial to Convert Raw Text to PDF Document in Browser Web App

Comments

Leave a Reply Cancel reply

Archives