Javascript PDFMake.js Tutorial to Export Raw Text to PDF Document in Browser

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 PDFMake library from CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>

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

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

            // Define the PDF document content using PDFMake
            const docDefinition = {
                content: [
                    { text: text, fontSize: 12 } // Add the text content with font size 12
                ],
                pageSize: 'A4', // Set to A4 size
                pageMargins: [40, 40, 40, 40] // Margins: left, top, right, bottom
            };

            // Use pdfMake to create and download the PDF
            pdfMake.createPdf(docDefinition).download('text_to_pdf.pdf');
        });
    </script>

</body>
</html>

<!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', () => {

const text = textInput.value.trim();

if (!text) {

alert('Please enter some text.');

return;

}

// Define the PDF document content using PDFMake

const docDefinition = {

content: [

{ text: text, fontSize: 12 } // Add the text content with font size 12

pageSize: 'A4', // Set to A4 size

pageMargins: [40, 40, 40, 40] // Margins: left, top, right, bottom

};

// Use pdfMake to create and download the PDF

pdfMake.createPdf(docDefinition).download('text_to_pdf.pdf');

});

</script>

</body>

</html>

Javascript PDFMake.js Tutorial to Export Raw Text to PDF Document in Browser

Comments

Leave a Reply Cancel reply

Archives