Breaking News: Grepper is joining You.com. Read the official announcement!

How to Print Specific Div Content using Javascript

Add Answer

Abdulrahman Muhammad Wakili answered on February 26, 2022 Popularity 5/10 Helpfulness 3/10

answer How to Print Specific Div Content using Javascript

related print a specific div in javascript

How to Print Specific Div Content using Javascript

Comment

How to Print Specific Div Content using Javascript

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Print</title>
    <!-- Bootstrap CSS via CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

    <div class="container">
        <div style="width: 15%; background-color: #1f386a; margin:50px 0;">
            <a href="https://www.buildwithphp.com/">
              <img src="https://www.buildwithphp.com/front/images/logo.webp" width="100%">
            </a>
        </div>
    </div>

    <!-- Your content goes here with Bootstrap styles -->
    <div class="container" id="container">
        <h1 class="text-primary">Hello, Bootstrap!</h1>
        <p class="lead">This is a simple example using Bootstrap styles.</p>
    </div>

    <div class="container">
        <button onClick="printdiv('container');" class="btn btn-primary">PRINT</button>
    </div>



<script>
function printdiv(elem) {
  var header_str = `<html>
                        <head>
                            <title>${document.title}</title>
                            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
                        </head>
                        <body>`;
  var footer_str = '</body></html>';
  var new_str = document.getElementById(elem).innerHTML;
  var old_str = document.body.innerHTML;
  document.body.innerHTML = header_str + new_str + footer_str;
  window.print();
  document.body.innerHTML = old_str;
  return false;
}
</script>

</body>
</html>

Popularity 5/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: javascript using

Link to this answer
Share Copy Link

Contributed on Dec 25 2023

Abdulrahman Muhammad Wakili

0 Answers Avg Quality 2/10

Closely Related Answers

print a specific div in javascript

Comment

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

    mywindow.document.write('<html><head><title>' + document.title  + '</title>');
    mywindow.document.write('</head><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;
}

Popularity 9/10 Helpfulness 7/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Feb 26 2022

Wissam

0 Answers Avg Quality 2/10

How to Print Specific Div Content using Javascript

Contents

More Related Answers

How to Print Specific Div Content using Javascript

Closely Related Answers

print a specific div in javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.