How to print a specific div from an HTML page with custom dimensions

Question

How to print a specific div from an HTML page with custom dimensions

I am looking for a solution to print just a specific div from a website with dimensions of 3"x5". Despite setting up the print button, the entire page continues to print every time.

Is there a way to hide all non-div content in print preview?

CSS

.wholebody {
  height: 289px;
  width: 489px;
  border: 2px solid #00001a;
}

</style>

HTML

<body>

<button onclick="window.print()">Print Page</button>

<div class="wholebody">

</div>

Please advise on any necessary JS functions needed to achieve hiding non-div content. Thank you.

javascript html css

Answer 1

Answer №1

To specify which content to print, you can utilize the @media type print in CSS.

Print: For use with paged material and documents displayed on a screen in print preview mode. (Refer to paged media for formatting specifics related to these formats.)

.wholebody {
  height: 289px;
  width: 489px;
  border: 2px solid #00001a;
}

@media print{
body{
visibility: hidden;
}
div{
visibility: visible; 
}

}

<button onclick="window.print()">Print Page</button>

<p>Content not intended for printing</p>
<div class="wholebody">Print this part</div>

Answer 2

To specify which content to print, you can utilize the @media type print in CSS.

Print: For use with paged material and documents displayed on a screen in print preview mode. (Refer to paged media for formatting specifics related to these formats.)

.wholebody {
  height: 289px;
  width: 489px;
  border: 2px solid #00001a;
}

@media print{
body{
visibility: hidden;
}
div{
visibility: visible; 
}

}

<button onclick="window.print()">Print Page</button>

<p>Content not intended for printing</p>
<div class="wholebody">Print this part</div>

Answer 3

Answer №2

To specify the styles that should be applied when a web page loads, use the @media screen{} block. When the window.print() method is called, the styles within the @media print{} block will take effect. In this instance, clicking on the <button> element will move the newly created element to the publishing page.

var button = document.getElementById('printButton');

printButton.addEventListener('click', function(){  
  var div = `<div style="width:30px;height:50px;border:2px solid black; margin: 20px; display: block;"></div>`;
  $('.wholebody').append(div);
   window.print();
});

@media screen{
  .wholebody {
    height: 289px;
    width: 100%;
    border: 2px solid #00001a;
  }
  
  #printButton{    
    margin-bottom: 5px;
  }
}

@media print{
  #printButton{
    display: none;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <button id="printButton">Print Page</button>

  <div class="wholebody">
  </div>
</body>

Answer 4

To specify the styles that should be applied when a web page loads, use the @media screen{} block. When the window.print() method is called, the styles within the @media print{} block will take effect. In this instance, clicking on the <button> element will move the newly created element to the publishing page.

var button = document.getElementById('printButton');

printButton.addEventListener('click', function(){  
  var div = `<div style="width:30px;height:50px;border:2px solid black; margin: 20px; display: block;"></div>`;
  $('.wholebody').append(div);
   window.print();
});

@media screen{
  .wholebody {
    height: 289px;
    width: 100%;
    border: 2px solid #00001a;
  }
  
  #printButton{    
    margin-bottom: 5px;
  }
}

@media print{
  #printButton{
    display: none;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <button id="printButton">Print Page</button>

  <div class="wholebody">
  </div>
</body>

How to print a specific div from an HTML page with custom dimensions

Answer №1

Answer №2

Similar questions

Simple method to toggle between elements using jQuery

Tips for efficiently waiting for the outcome in a unified function for multiple callbacks within node.js

Struggling with integrating PHP within a JavaScript AJAX function

Is it possible to incorporate dynamic variables into the directives of a nested loop? Plus, thoughts on how to properly declare variables in a node.js environment

What is the best way to implement my custom toolbar button to utilize the form's validation function within react-admin?

Guide on passing variables along the promise chain within a Node Express router

Is it possible to access values from an IndexedDB object store key stored in an array without global access?

Best Practices for Making Remote Requests in Ruby on Rails

Are there any other options available in JavaScript to replace the .unload() function?

NodeJS instructs open(html) to execute first before any other code is executed

What is the optimal strategy for incorporating both useLazyQuery and useQuery within the Apollo-client based on specific conditions?

What are the reasons for the failure of an image upload when checked with PHP's is_uploaded_file function?

Invoking WinJS.Binding.List.createFiltered with an asynchronous call to the predicate function

Troubleshooting issue: Failure in proper functionality of Jquery's slideDown

Error: Collection2 validation did not pass: The field 'name' must be filled in, the field 'email' cannot be empty, and the field 'message' is mandatory

Beware: The use of anonymous arrow functions in Next.js can disrupt Fast Refresh and lead to the loss of local component state

In Vue3, have you ever wondered why the $emit function seems to work fine before a promise fetch,

Obtain the text that is shown for an input field

Informing the parent window of the child window's activities in order to adjust the timer for the user timeout feature

I am puzzled as to why my ajax script is giving me a 404 error even though the URL appears to be correct