Print a single element from a webpage using JavaScript

#javascript #webdev

I use this code snippet in the dev tools to print a small portion of a webpage. It copies every CSS stylesheet in the head of the page which helps render the printed content as close as possible to how it appears in the browser.

function printElement(element) {
    const newWin = window.open('', 'Print-Window');

    // Copy all stylesheets
    let stylesheets = '';
    for (var i = 0; i < document.styleSheets.length; i++) {
        if (document.styleSheets[i].href) {
            stylesheets += '<link rel="stylesheet" href="' + document.styleSheets[i].href + '" type="text/css">';
        }
    }

    newWin.document.open();
    newWin.document.write('<html><head>' + stylesheets + '</head><body>' + element.innerHTML + '</body></html>');
    newWin.document.close();
    setTimeout(function () {
        newWin.print();
        // newWin.close(); // close tab after printing
    }, 250); // Delay to ensure styles are applied
}

// Usage
// printElement(document.getElementById('myElementId'));
// printElement(document.querySelector('#myElementId'));
// 
// If you already have an element selected in the dev tools:
// printElement($0);

How to use

Open the dev tools
Copy & paste the function above into the Console
Select the div you want to print
Then run printElement($0)

Examples

As shown in the screenshot above, I use this often with ChatGPT responses when I want to print just one answer that might be too long to fit on a screenshot. This is actually helpful if you are creating GPTs, where you need to upload a PDF from one of the responses from GPT.

For example, this is how it looks originaly:

This is how it looks when running printElement($0); on that div:

And this is what it looks if you close the print dialog:

Conclusion

Although this simple function isn't 100% bullet proof, it helps printing certain parts of a website while attempting to keep the styles as best as it can.