How to Print Text from Textarea

Had someone ask me how to print the content from a textarea element. This is useful when you want to create a print-friendly version of form content or user input.

Here are a few ways to handle this:

Method 1: Simple JavaScript print

function printTextarea() {
    var textarea = document.getElementById('myTextarea');
    var printWindow = window.open('', '', 'width=600,height=400');
    printWindow.document.write('<html><head><title>Print</title></head><body>');
    printWindow.document.write('<pre>' + textarea.value + '</pre>');
    printWindow.document.write('</body></html>');
    printWindow.document.close();
    printWindow.print();
}

Method 2: Using CSS print styles

<style>
@media print {
    .no-print { display: none; }
    .print-only { display: block; }
    textarea { display: none; }
    .print-content { display: block; }
}
</style>

<textarea id="myTextarea">Your text here</textarea>
<div class="print-content" style="display: none;"></div>
<button onclick="prepareForPrint()">Print</button>

function prepareForPrint() {
    var textarea = document.getElementById('myTextarea');
    var printDiv = document.querySelector('.print-content');
    printDiv.innerHTML = textarea.value.replace(/\n/g, '<br>');
    window.print();
}

Method 3: jQuery approach

$('#printButton').click(function() {
    var textareaContent = $('#myTextarea').val();
    var printWindow = window.open('', '', 'width=600,height=400');
    printWindow.document.write('<html><head><title>Print</title>');
    printWindow.document.write('<style>body { font-family: Arial; margin: 20px; }</style>');
    printWindow.document.write('</head><body>');
    printWindow.document.write('<pre>' + textareaContent + '</pre>');
    printWindow.document.write('</body></html>');
    printWindow.document.close();
    printWindow.print();
});

Method 4: Preserve formatting

function printFormattedText() {
    var textarea = document.getElementById('myTextarea');
    var printWindow = window.open('', '', 'width=600,height=400');
    
    printWindow.document.write(`
        <html>
        <head>
            <title>Print Text</title>
            <style>
                body { font-family: monospace; white-space: pre-wrap; margin: 20px; }
            </style>
        </head>
        <body>${textarea.value}</body>
        </html>
    `);
    
    printWindow.document.close();
    printWindow.print();
}

Method 5: Using hidden div approach

function printTextarea() {
    var textarea = document.getElementById('myTextarea');
    var printDiv = document.createElement('div');
    printDiv.innerHTML = textarea.value.replace(/\n/g, '<br>');
    printDiv.style.display = 'none';
    document.body.appendChild(printDiv);
    
    // Hide everything else
    var originalContent = document.body.innerHTML;
    document.body.innerHTML = printDiv.innerHTML;
    window.print();
    document.body.innerHTML = originalContent;
}

Method 6: Print with CSS media queries

@media print {
    body * { visibility: hidden; }
    .print-area, .print-area * { visibility: visible; }
    .print-area { position: absolute; left: 0; top: 0; }
}

function printTextarea() {
    var textarea = document.getElementById('myTextarea');
    var printDiv = document.createElement('div');
    printDiv.className = 'print-area';
    printDiv.innerHTML = '<pre>' + textarea.value + '</pre>';
    document.body.appendChild(printDiv);
    window.print();
    document.body.removeChild(printDiv);
}

Tips:

Use <pre> tag to preserve whitespace and line breaks
Consider using white-space: pre-wrap CSS for better formatting
Always test printing in different browsers
Remember that print dialog behavior varies across browsers
The hidden div approach avoids popup blockers

The key is to create a new window with just the content you want to print, then call window.print() on that window.