英文:
How to maintain CSS styles while printing from a specific part of a webpage
问题
我正在尝试打印页面的特定部分并保持其样式。目前，当我按下打印按钮时，所有CSS样式都被剥离。这是我的HTML文档。
<!-- 这是您的HTML代码 -->
关于您的问题，您希望打印的内容应该只包括文本、文本的边框和颜色，而不包括其他元素。解决这个问题的关键在于，在打印时只保留所需元素的内容，而不包括其他不必要的元素。您可以尝试使用CSS的@media print媒体查询来控制在打印时应该显示什么。
例如，您可以在样式表中添加以下内容：
@media print {
body * {
display: none;
}
#printcard, #printcard * {
display: block;
}
}
这将隐藏所有元素，然后只显示#printcard及其子元素，这样只有您希望打印的内容会出现在打印结果中。
请在您的代码中添加这些CSS规则并测试，看看是否符合您的预期结果。
英文:
I am trying to print a specific part of my page and also maintain its style. currently when I press print all my CSS styles are stripped away. Here is my HTML document.
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-js -->
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', () => {
//this is the code that actually does the 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();
})
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
help me with pointers on what I need to do.
the iamge i get is
This is the image result that i get, the expected result should be like this one except only the text and its border and color are visible, all else are blank
答案1
得分: 1
尝试这样做：添加一个名为no-Print的类：
CSS
@media print {
.no-Print { display : none; }
}
HTML
<ul class="no-Print">
<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">
blah bla blah
</div>
旧方法：
HTML
<!DOCTYPE html>
<html lang="en">
...
<style media="print">
.no-Print { display : none; }
</style>
</head>
<body>
<ul class="no-Print">
<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">
blah bla blah
</div>
...
英文:
try that --> add a no-Print class:
CSS
@media print {
.no-Print { display : none; }
}
HTML
<ul class="no-Print">
<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">
blah bla blah
</div>
old method :
HTML
<!DOCTYPE html>
<html lang="en">
...
<style media="print">
.no-Print { display : none; }
</style>
</head>
<body>
<ul class="no-Print">
<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">
blah bla blah
</div>
...
答案2
得分: 0
以下是您提供的代码的翻译部分：
旧代码：
const button = document.createElement('button') //这是打印按钮
button.classList.add('printButton')
button.textContent = '打印'
const entryContainer = document.getElementById('container')
const card = document.createElement('div') //这将是要打印的卡片
card.classList.add('card')
card.setAttribute('id', 'printcard')
card.textContent = '我在中学的第一个季度不及格，所以我制作了一张假的成绩单。那一年，我每个季度都这样做。我忘了他们会寄回家年终成绩单，所以我妈妈在我伪造之前就拿到了真的成绩单。她非常生气，责怪学校的错误。那位老师那年退休，已经扔掉了他的记录，所以他们不得不采用我母亲的“证据”（我整年都制作的假证明）来“纠正”这个“错误”。我从未告诉她真相。'
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();
})
新代码：
const button = document.createElement('button') //这是打印按钮
button.classList.add('printButton')
button.textContent = '打印'
const entryContainer = document.getElementById('container')
const card = document.createElement('div') //这将是要打印的卡片
card.classList.add('card')
card.classList.add('card', 'print');
card.setAttribute('id','printcard')
card.textContent = '我在中学的第一个季度不及格，所以我制作了一张假的成绩单。那一年，我每个季度都这样做。我忘了他们会寄回家年终成绩单，所以我妈妈在我伪造之前就拿到了真的成绩单。她非常生气，责怪学校的错误。那位老师那年退休，已经扔掉了他的记录，所以他们不得不采用我母亲的“证据”（我整年都制作的假证明）来“纠正”这个“错误”。我从未告诉她真相。'
entryContainer.appendChild(card)
entryContainer.appendChild(button)
button.addEventListener('click', () => {
//这是实际执行打印的代码
var prtContent = document.getElementById("printcard");
print(prtContent)
})
英文:
I just figured out the answer, in the old code I had put all these lines in javascript alot of it being unnecessary, here is the old code.
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', () => {
//this is the code that actually does the 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();
})
here is the new code that works as required
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.classList.add('card', 'print');
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',()=>{
//this is the code that actually does the printing
var prtContent = document.getElementById("printcard");
print(prtContent)
})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论