如何使div在不可打印的div中可打印
要使一个div在不可打印的div中可打印，可以通过以下步骤实现：
- 首先，确保要打印的div元素具有合适的样式和内容。可以使用CSS来设置打印样式，例如隐藏不需要打印的元素、调整字体大小和行距等。
- 使用JavaScript创建一个打印函数，该函数将触发浏览器的打印功能并将指定的div元素作为打印内容。可以使用window.print()方法来触发打印功能。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
@media print {
.no-print {
display: none;
}
}
</style>
<script>
function printDiv(divId) {
var printContents = document.getElementById(divId).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
</head>
<body>
<div id="printableDiv">
<!-- 这里是要打印的内容 -->
<h1>可打印的内容</h1>
<p>这是一段示例文本。</p>
</div>
<div class="no-print">
<!-- 这里是不需要打印的内容 -->
<button onclick="printDiv('printableDiv')">打印</button>
</div>
</body>
</html>在上面的示例中，我们首先使用CSS的@media print媒体查询来隐藏带有class="no-print"的div，这样在打印时就不会显示该div。
然后，我们定义了一个printDiv函数，该函数接受一个div的id作为参数。函数首先获取指定div的innerHTML，然后将整个页面的innerHTML替换为要打印的内容，接着触发window.print()方法来打印页面。最后，将原始的页面内容恢复。
在页面中，我们将要打印的内容放在id为"printableDiv"的div中，并在页面的其他位置放置一个按钮，点击按钮时调用printDiv函数并传入要打印的div的id。
这样，当用户点击打印按钮时，指定的div内容将作为打印内容，并触发浏览器的打印功能。
相关·内容
1回答
如何打印<div id="frm"/>
javascript、php
如何修复当我们只想打印div id="frm“时的代码。并隐藏页眉和页脚，以及单击按钮后打印按钮(我的意思是在打印预览中应该只显示frm格式的内容)
<html>
<head>
<title>Clinic System Management</title>
<link rel='stylesheet' type='text/css' href='style2.css'/>
<link rel='stylesheet' type='t
浏览 2提问于2016-11-24得票数 0
3回答
有没有使用Ajax打印特定div的方法
javascript、jquery、ajax
我想使用Ajax/Jquery打印特定的div，目前我正在使用下面的Javascript函数，但它搞砸了页面的所有动态功能:按钮等。
JSP：
<div id="printableArea">content</div>
<input class="printButton" type="button" value="Print" name="print"
onclick="printDiv()">
<script>
浏览 0提问于2016-04-04得票数 1
1回答
如何在window.print()中去掉页眉和页脚；
javascript、jquery、windows、printing
我使用window.print()来打印页面，但是我得到了包含页面标题、文件路径、页码和日期的页眉和页脚。如何删除或编辑它们？
我也试过了。
@media print {
@page { margin: 0; }
body { margin: 1.6cm; }
}
，但是任何解决方案都不适合我。
这是我从POJO中找到div内容。
<div id="textDiv">
<pre id="foo"><%= student.getDescription()%></pre>
</div>
这是
浏览 37提问于2018-12-12得票数 0
3回答
带有javascript & form字段的可打印div
javascript、html、printing
我使用的脚本将打印指定的div，我调用。问题是，当我想打印带有HTML字段的表单时，它不会打印出这些字段中的信息。相反，它留下了空白。他们是否也将输入的信息打印出来？
Javascript
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.
浏览 6提问于2012-03-02得票数 1
5回答
使用打印窗口时不打印输入文本
javascript、html、css、printing
我有以下代码
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
function sync() {
var n1 = docu
浏览 0提问于2017-09-17得票数 1
2回答
使用javascript后，文本框值是否从页面和打印窗口中消失？
php、javascript、html
我有代码打印选定的div区域后，点击按钮打印窗口打开，但问题是，当我键入一些东西到文本框中，然后点击按钮，然后文本框值从页面上消失，也文本框值没有出现在打印窗口中？
<script>
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
docu
浏览 1提问于2013-03-25得票数 0
3回答
使用window.print()打印时，无法打印输入字段的文本
javascript、html、printing
我有以下html布局：
Please fill up this form carefully:
<input type="button" onclick="printDiv('print'); return false;" value="Print" />
<div id="print">
<form action="" method="post">
<input type="text" name="us
浏览 9提问于2015-06-14得票数 7
1回答
打印区域的CSS
javascript、jquery、html、css
$("#btnPrint").on('click', function(){
var toPrint = document.getElementById('printDiv');
var popupWin = window.open('', '_blank', 'width=1250,height=850,location=no,left=200px,');
popupWin.document.open();
popupWin.document.write('
浏览 3提问于2019-03-06得票数 2
回答已采纳
2回答
包括打印div上的css样式
javascript、html、css、printing
关于jquery (菜鸟)的帮助。我有这个打印div的代码，我想在上面包含CSS，该怎么做呢？
<script language="javascript">
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
d
浏览 0提问于2015-09-02得票数 1
3回答
如何仅在打印文件中显示div的内容？
javascript、printing
注意我下面的代码。我有一个内容在一个DIV，可以打印时，“打印”按钮被点击。它工作得很好，但是我需要这个div (及其内容)隐藏在站点页面上，并且只显示在打印文件中。你对我有什么建议吗？
function printDiv(printThis) {
var printContents = document.getElementById(printThis).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = pr
浏览 0提问于2018-02-20得票数 3
回答已采纳
1回答
在页面上打印特定元素？
javascript、jquery
我想打印一个页面的特定文本元素。我目前有10张卡在一个单一的页面，当用户选择打印一张特定的卡，我只想要选择的卡打印。我用的是javascript:window.print()，但发现它打印了所有的卡片。然而，我发现了一个代码片段(下面)，它可以做我想做的事情，但是去掉了徽标。我尝试过添加document.getElementById('logo')，但它不起作用。不确定如何将徽标添加为可打印的区域。是否也有一个jQuery方法可以不使用插件来处理这个问题？
<div class="container">
<img id="lo
浏览 1提问于2014-10-23得票数 1
回答已采纳
1回答
未解析函数或方法JavaScript yii2
javascript、jquery、printing
我想打印HTML的内容。为此，我创建了一个函数，在这个函数中，我在其中传递了div ID。但是，选择显示了以下消息。
我的javascript在document.ready函数下
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
浏览 2提问于2017-10-26得票数 0
回答已采纳
2回答
如何检查是否按下了javaScript按钮
javascript、html
我在HTML中有这个按钮，我需要检查这个按钮是否已经被按下以激活另一个功能。
<button id="generator" class="button ripple" onclick="myFunction()">Berechnen</button>
function printDiv(print) {
if(document.getElementById('generator').clicked == true){
var printContents =
浏览 0提问于2021-02-17得票数 0
2回答
如何使用javascript/jQuery/ajax打印不同的页面？
javascript、jquery、ajax
使用下面的代码，它将显示“打印”对话框，并成功地打印该页，但是如何在单击此按钮后打印不同的页？不同的页面名称是：letterprint.php
<div class="below_movie_left" id="printableArea">
My printing contents
</div>
<input type="button" class="submit_button" onclick="printDiv('printableArea')" value=
浏览 1提问于2014-05-17得票数 7
回答已采纳
3回答
打印包含文本区域的div。使用js的用户输入
javascript、jquery、printing
我有这个简单的脚本，打印网页的一部分。但是，它不打印用户输入。
我的目标是只打印表单和用户输入，而不是网页的其余部分。
我不想使用css；只想使用js/jQuery和html。
我的问题是:如何打印各种表单输入元素，包括用户输入？
HTML：
<div id="print-content">
<textarea>Print User Input</textarea>
<input type="button" onclick="printDiv('print-content&
浏览 2提问于2018-11-21得票数 0
3回答
window.print()不工作
javascript、printing
我试图使用按钮打印文档，但每次尝试该按钮，它都无法工作。
var printContents = document.getElementById("test").innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
当它不起作用时，
浏览 0提问于2013-12-02得票数 0
2回答
使用点击功能后刷新同一页面上的div
javascript、jquery、html、javascript-events
我使用的是一个java脚本打印函数，它可以在单击时打印页面的预定义div。函数如下：
<head>
<script type="text/javascript">
function printDiv(any printable div) {
var printContents = document.getElementById(any printable div).innerHTML;
var originalContents = document.body.innerHTML;
document.body.inne
浏览 0提问于2012-07-11得票数 0
1回答
单击“打印”按钮并触发打印功能后，应用程序就会冻结。
javascript
我面临着在我的应用程序中实现打印功能的问题。我有一个javascript函数，当我单击print按钮时，应该打印特定div的内容。每当我单击“打印”按钮时，打印功能就会正常工作，但它会导致主窗口冻结。我也尝试过添加一个window.close，但似乎不起作用。是否知道如何解决此问题或如何打印特定内容的任何替代方案。我尝试的任何其他方法最终都会将div的所有元素向左移动。
函数低于
export const printDiv = (id: string) => {
let printContents = document.getElementById(id).innerHTML
l
浏览 3提问于2022-02-24得票数 0
2回答
如何连接两个类或从DOM打印一个类
javascript、join、printing
我有一个DOM，里面有一个类.printableArea。页面上有几个具有相同类的div，但它们包含不同的信息。我需要做的是打印这个类的内容，让它将内容组合到一个打印的页面中。或者，我可以用唯一的I重命名div(例如，#printableArea1和#printableArea2)，并打印它们的内容。我所说的priny实际上是指打印到打印机上。 有没有人能解释一下打印classes或两个或多个ids的内容呢？ 我是不是需要一种concat？ \\This is the original that loads the contents of the first .printableArea.
浏览 49提问于2019-04-30得票数 1
回答已采纳
1回答
使用css打印div html代码
html、css
我有这个html代码
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
<div class="container&#
浏览 15提问于2018-08-17得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
