我有一个带有一些图表，标签，文本框等的html页面，并希望在打印模式下以表格格式显示一些标签和文本框值。
我正在以CSS样式使用@media print，当用户按ctrl + p打印页面时，可以在其中重新定位/调整大小。
@media print {
button, .no-print {
display: none !important;
}
.myclass-print {
border: none !important;
position: absolute;
top: 670px;
left: 420px;
}
.comment-print {
position: absolute;
top: 1010px;
left: 40px;
width: 360px;
word-break: break-all;
}
.no-border-print {
border: none;
}
aside#sidebar, header[role="banner"], footer, #comments, #respond {
display: none;
}
.page-header {
vertical-align: middle;
text-align: center;
border-bottom: none;
}
}
<div class="myclass-print">
@Html.Partial("~/_MyPartial.cshtml")
</div>
在_MyPartial.cshtml中，html表中有一些文本框组件。我只想在打印模式下打印它们的值，即打印中没有下拉框或文本框，而只是它们的内容（文本）。如果有人可以与我分享解决方案，我将非常高兴。
一种解决方案是使用JavaScript将文本框的值分配给页面上其他位置的其他元素。
仅在打印时显示这些元素。隐藏打印中的输入文本框。
工作示例：
// When the user prints
window.addEventListener("beforeprint", function(event) {
// Assign the value from the input to the print only span innerText
document.getElementById('sample-input-text').innerText = document.getElementById('sample-input').value;
});.print-only {
display: none;
}
.no-print {
display: block;
}
@media print {
.print-only {
display: block;
}
.no-print {
display: none;
}
}<input class="no-print" type="text" value="Sample Text" name="sample-input" id="sample-input">
<span class="print-only" id="sample-input-text"></span>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句