How Can I Print a Specific DIV's Content with Enhanced Browser Compatibility?-JS Tutorial-php.cn

How Can I Print a Specific DIV's Content with Enhanced Browser Compatibility?

Patricia Arquette

Release： 2024-12-06 17:32:11

Original

696 people have browsed it

How Can I Print a Specific DIV's Content with Enhanced Browser Compatibility?

Printing DIV Contents with Enhanced Functionality

In various web development scenarios, you may encounter the need to print the contents of a specific DIV element. To achieve this, there are several approaches available. In this article, we will delve into a method that provides enhanced functionality and compatibility across different browsers, particularly Chrome.

The Solution

The provided function, PrintElem(), offers a comprehensive approach for printing the contents of a DIV:

function PrintElem(elem) {
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');

    mywindow.document.write('<html><head><title>' + document.title + '</title></head>');
    mywindow.document.write('<body>');
    mywindow.document.write('<h1>' + document.title + '</h1>');
    mywindow.document.write(document.getElementById(elem).innerHTML);
    mywindow.document.write('</body></html>');

    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/

    mywindow.print();
    mywindow.close();

    return true;
}

Copy after login

Explanation

Opening a New Window: The function creates a new browser window, mywindow, to display the printed content.
Setting Page Elements: It adds essential HTML elements like the head, title, and body to the new window's document.
Adding DIV Content: The code extracts the inner HTML of the specified DIV element (elem) and writes it into the body section of the new window.
Browser-Specific Compatibility: To ensure compatibility with different browsers, particularly IE, the function uses the document.close() and document.focus() methods.
Printing and Window Management: After constructing the HTML document, mywindow's document is closed to prevent further modifications. The browser's focus is set to the new window to enable printing. The print() method is called, and finally, the new window is closed.

By employing this function, you can effortlessly print the contents of any DIV element with additional features like a page title, ensuring compatibility and providing a smooth printing experience for your users.

The above is the detailed content of How Can I Print a Specific DIV's Content with Enhanced Browser Compatibility?. For more information, please follow other related articles on the PHP Chinese website!