Tips for preserving CSS formatting during printing from a designated section of a webpage

Question

Tips for preserving CSS formatting during printing from a designated section of a webpage

When I try to print a specific section of my webpage, all the CSS styles are getting removed. Here is my HTML document:

const button = document.createElement('button') //this is the print button
button.classList.add('printButton')
button.textContent = 'Print'

const entryContainer = document.getElementById('container')
const card = document.createElement('div') //this will be the card to print
card.classList.add('card')
card.setAttribute('id', 'printcard')
card.textContent = 'I failed the first quarter of a class in middle school, so I made a fake report card. I did this every quarter that year. I forgot that they mail home the end-of-year cards, and my mom got it before I could intercept with my fake. She was PISSED—at the school for their error. The teacher also retired that year and had already thrown out his records, so they had to take my mother’s “proof” (the fake ones I made throughout the year) and “correct” the “mistake.” I’ve never told her the truth.'

entryContainer.appendChild(card)
entryContainer.appendChild(button)

button.addEventListener('click', () => {
  var prtContent = document.getElementById("printcard");
  var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
  WinPrint.document.write(prtContent.innerHTML);
  WinPrint.document.write('<link rel=stylesheet href="style.css">')
  WinPrint.document.close();
  WinPrint.focus();
  WinPrint.print();
  WinPrint.close();
})

ul {
  display: flex;
  flex-direction: column;
  font-size: 20px;
  margin-top: 50px;
  text-decoration: none;
  width: 500px;
  list-style: none;
  gap: 10px;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 20px;
  width: 700px;
  height: 450px;
  border: 2px solid rgb(8, 8, 8);
}

.card {
  width: 500px;
  height: 350px;
  background-color: red !important;
  font-size: 1.2em;
  padding: 20px;
  border: 2px solid rgb(8, 8, 8);
}

.printButton {
  width: 120px;
  height: 40px;
  font-size: 1.5em;
  cursor: pointer;
}

<ul>
  <li>This is</li>
  <li>The content that </li>
  <li>I dont want </li>
  <li>printed</li>
  <li>on the page</li>
</ul>
<div class="card-container" id="container"></div>

I need guidance on how to resolve this issue. Here is an image of what I am currently getting https://i.sstatic.net/1LojQ.png

The expected outcome should look like the example below, where only the text, borders, and colors are visible, and everything else is blank https://i.sstatic.net/0g3HE.png

javascript html css

Answer 1

Answer №1

Give this a shot --> include a no-Print class:
CSS

@media print { 
  .no-Print { display : none; }
  }

HTML

<ul class="no-Print">
  <li>This content</li>
  <li>Should not be </li>
  <li>Displayed when </li>
  <li>Printing</li>
  <li>The page</li>
</ul>
<div class="card-container" id="container"gt;
   More information
</div>

prior solution :
HTML

<!DOCTYPE html>
<html lang="en  
...

<style media="print">
  .no-Print { display : none; }
</style>
</head>
<body>

  <ul class="no-Print">
    <li>This content</li>
    <li>Should not be </li>
    <li>Displayed when </li>
    <li>Printing</li>
    <li>The page</li>
  </ul>
  <div class="card-container" id="container">
     More information
  </div>

...

Answer 2

Give this a shot --> include a no-Print class:
CSS

@media print { 
  .no-Print { display : none; }
  }

HTML

<ul class="no-Print">
  <li>This content</li>
  <li>Should not be </li>
  <li>Displayed when </li>
  <li>Printing</li>
  <li>The page</li>
</ul>
<div class="card-container" id="container"gt;
   More information
</div>

prior solution :
HTML

<!DOCTYPE html>
<html lang="en  
...

<style media="print">
  .no-Print { display : none; }
</style>
</head>
<body>

  <ul class="no-Print">
    <li>This content</li>
    <li>Should not be </li>
    <li>Displayed when </li>
    <li>Printing</li>
    <li>The page</li>
  </ul>
  <div class="card-container" id="container">
     More information
  </div>

...

Answer 3

Answer №2

After analyzing the issue, I realized that the old code contained unnecessary lines of JavaScript code. Here is an example of the old code:

const button = document.createElement('button') //this creates a print button
button.classList.add('printButton')
button.textContent = 'Print'

const entryContainer = document.getElementById('container')
const card = document.createElement('div') //this will be the printed card
card.classList.add('card')
card.setAttribute('id', 'printcard')
card.textContent = 'I failed the first quarter of a class in middle school, so I made a fake report card every quarter that year. However, my plan backfired when my mother received the real end-of-year cards and was upset with the school for their mistake. The teacher had already retired and discarded his records, leading to a situation where my fake reports were used as evidence to correct the error.'

entryContainer.appendChild(card)
entryContainer.appendChild(button)

button.addEventListener('click', () => {
  //code for printing
  var prtContent = document.getElementById("printcard");
  var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
  WinPrint.document.write(prtContent.innerHTML);
  WinPrint.document.write('<link rel=stylesheet href="style.css">')
  WinPrint.document.close();
  WinPrint.focus();
  WinPrint.print();
  WinPrint.close();
})

Below is the revised code that functions correctly:

const button = document.createElement('button')  //creates a print button
button.classList.add('printButton')
button.textContent = 'Print'

const entryContainer = document.getElementById('container')
const card = document.createElement('div') //represents the card to be printed
card.classList.add('card')
card.classList.add('card', 'print');
card.setAttribute('id','printcard')
card.textContent = 'I failed the first quarter of a class in middle school, so I created fake report cards throughout the year. After my mom discovered the truth by receiving the actual end-of-year report card, she was understandably angry at the school. The retiring teacher's lack of records meant that my fake reports became crucial in correcting the mistake.'




entryContainer.appendChild(card)
entryContainer.appendChild(button)

button.addEventListener('click',()=>{

    //printing code
    var prtContent = document.getElementById("printcard");
    print(prtContent)

})

Answer 4

After analyzing the issue, I realized that the old code contained unnecessary lines of JavaScript code. Here is an example of the old code:

const button = document.createElement('button') //this creates a print button
button.classList.add('printButton')
button.textContent = 'Print'

const entryContainer = document.getElementById('container')
const card = document.createElement('div') //this will be the printed card
card.classList.add('card')
card.setAttribute('id', 'printcard')
card.textContent = 'I failed the first quarter of a class in middle school, so I made a fake report card every quarter that year. However, my plan backfired when my mother received the real end-of-year cards and was upset with the school for their mistake. The teacher had already retired and discarded his records, leading to a situation where my fake reports were used as evidence to correct the error.'

entryContainer.appendChild(card)
entryContainer.appendChild(button)

button.addEventListener('click', () => {
  //code for printing
  var prtContent = document.getElementById("printcard");
  var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
  WinPrint.document.write(prtContent.innerHTML);
  WinPrint.document.write('<link rel=stylesheet href="style.css">')
  WinPrint.document.close();
  WinPrint.focus();
  WinPrint.print();
  WinPrint.close();
})

Below is the revised code that functions correctly:

const button = document.createElement('button')  //creates a print button
button.classList.add('printButton')
button.textContent = 'Print'

const entryContainer = document.getElementById('container')
const card = document.createElement('div') //represents the card to be printed
card.classList.add('card')
card.classList.add('card', 'print');
card.setAttribute('id','printcard')
card.textContent = 'I failed the first quarter of a class in middle school, so I created fake report cards throughout the year. After my mom discovered the truth by receiving the actual end-of-year report card, she was understandably angry at the school. The retiring teacher's lack of records meant that my fake reports became crucial in correcting the mistake.'




entryContainer.appendChild(card)
entryContainer.appendChild(button)

button.addEventListener('click',()=>{

    //printing code
    var prtContent = document.getElementById("printcard");
    print(prtContent)

})

Tips for preserving CSS formatting during printing from a designated section of a webpage

Answer №1

Answer №2

Similar questions

Extracting and passing a JSON object to a Spring controller

Text overlaps when li element is nested inside another element

Tips on preventing form submission when clicking on another button within the same form

How can we extract validation data from a function using Ajax and then transfer that information to another Ajax query?

Is there a way to automatically generate and allocate an identifier to an input field?

Ways to reach the standard look

Exploring the method of dynamically adding a row to a table on button click using Angular 2

Reloading a webpage does not clear HTML tables containing jQuery interactions in Firefox

What steps do I need to take to modify the MUI Badge component and insert custom text inside?

Tips for making a tray-shaped bottom border similar to the Android input field

Duplicate the Date object without retaining previous data

Adjusting Picture Sizes to Fit the Dimensions of a Photo Frame

Generate all possible arrangements of zeros and ones in a two-dimensional matrix with dimensions of n by n

What are the steps to automatically populate the location or name in the trip advisor widget?

How can I preloaded self-hosted fonts in Next.js without receiving a console warning for not using the resource within a few seconds?

Having difficulty in displaying database values in HTML modal using PHP

Exciting effects activated by hovering on a button

"React and Next.js are causing a return value of undefined on

React - Effective Ways to Update State Following an AJAX Call

Missing Ajax Functionality in Laravel Application