如何使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在不可打印的div中可打印
html、css
使用下面的示例代码，我将如何使带有id=的div“打印”为唯一可打印的内容，而不必使每个单独的项目都不可打印。目标是在"content“目录中保留”d-class=-none“，但能够使"print”目录可打印。我想用scss来做这件事，这样无论你使用的是window.pr
浏览 22提问于2021-02-12得票数 0
回答已采纳
1回答
使用@media print定位用于打印的jquery.draggable() div的问题
javascript、jquery、css、printing
我有一个web应用程序，当用户从web浏览器中选择打印时，我需要打印一个可拖放的div。到目前为止，我发现的最简洁的建议是堆栈溢出响应，其中建议我使页面不可见，并且只为@media print显示#plotArea，如下所示： body * {是可拖动的，我不能为我的生命删除偏移量，这样div本身就可以正确地进行打印<
浏览 3提问于2016-01-15得票数 0
回答已采纳
1回答
打印jquery colorbox内容
jquery-plugins、jquery
我的客户希望直接从页面打印此内容，因此我使用了一个print，它通过colorbox的onComplete事件钩子加载到文档头。加载的内容是一大堆具有内联样式的旧式表格，我似乎无法用print CSS覆盖这些表格，而且当我按媒体类型查看时，布局看起来有问题。我不知道如何打印iframe的内容。当我尝试它的时候，它打印了整个页面的一个非常小的快照，其中iframe在中间。
我在这个问
浏览 0提问于2010-07-16得票数 2
回答已采纳
2回答
在console中展开JavaScript对象时，会显示不同的属性值
javascript、google-chrome、datetime
当对象被展开时，date有什么可能有不同的值？
浏览 4提问于2015-07-15得票数 9
回答已采纳
1回答
如何在使用这个js代码进行打印时隐藏一些div？
javascript、php、css
我正在用这段代码打印页面的一部分，如何不打印一些div？div id与代码，因为id不是静态的)打印代码是有效的，没有问题，但我不能隐藏一些div从打印，所有的css与@媒体打印是工作和隐藏只有当我从右击<em
浏览 3提问于2021-07-06得票数 0
3回答
Firefox不会打印带有显示样式的iframe :无
html、css、firefox、cross-browser
print函数将单独的页面加载到display:none iframe中，并打印该iframe onLoad。它适用于IE、Chrome，但不适用于firefox。在firefox中，它将页面加载到div中，但从不打印或打开打印对话框。结果显示，如果将iframe设置为display:none，firefox将不会打印如下所示：
<div id="printerDiv" s
浏览 5提问于2011-09-01得票数 5
回答已采纳
2回答
如何在Jquery中使不可见的div竞争？
javascript、jquery、css
你能告诉我如何使不可见的内容，也就是说，我做了一个例子，我在div..In .But中打印一行，它对用户是不可见的，但它应该写在div .but中，一段时间后，它对用户可见。setInterval(function(){
console.log($(&#x
浏览 2提问于2014-04-19得票数 0
1回答
如何强制CSS媒体类型为打印但在屏幕上？
css、media-queries
我想向用户展示页面在打印时的外观，而不是实际要求他们单击print按钮。我有必要的媒体查询基于CSS的打印，但这将只适用于打印预览和当页面实际打印。我的要求是在应用程序的对话框中显示打印格式的页面。
浏览 0提问于2017-09-01得票数 2
1回答
@media print如何在表内仅显示下级元素
css、html-table
我想设置一个打印页。我使用@media print。现在我的情况是，我只想从表中提取文本。</p> </td> <div> Firstname </td>
<td>
浏览 24提问于2021-02-09得票数 0
6回答
带有引导程序3的打印页面
printing、twitter-bootstrap-3、dpi
我一直在这里寻找很多的答案，在堆叠溢出，半覆盖我想知道，但没有找到任何对我有用的东西。我知道我可以专门为<em
浏览 13提问于2013-11-27得票数 42
回答已采纳
1回答
从html字符串生成pdf的javascript
javascript、html、pdf-generation
我有一个生成的html页面作为一个字符串存储在一个变量中(让我们称之为var htmlPage)，我想把它转换成一个pdf，我以后可以下载
var htmlPage = '<!
浏览 1提问于2019-06-29得票数 0
1回答
在div中打印div
css、printing、html
我想出了如何让我想要打印的div显示所有其他未显示的内容。我遇到的问题是，当我去打印预览时，当有多个页面要打印时，似乎缺少一些行。这是我的print.css文件：#map_canvas, #nav, #wb_header, #wb_outline, #wb_navoutlinecolor to black (useful for light text
浏览 4提问于2011-02-12得票数 1
1回答
如何在同一时间同时打印多个div？
jquery
我使用下面的脚本打印一个特定的div作为一个pdf文件。hiddenAreas.hide();window.print();}})(jQuery);
但是我不能在同一个pdf上打印多个有不同I的div。
浏览 3提问于2015-04-09得票数 0
回答已采纳
1回答
在“打印预览”中打开另一页或图像
javascript、printing
我试图创建一个打印机友好的页面。我们使用第三方软件对此进行排序，该软件可以快照页面并显示图像文件。现在，我们已经创建了一个指向图像页面的链接，并希望创建一个可以直接打开打印预览的javascript。我发现两个javascripts在一个新页面中首先打开，另一个打开打印预览.This，它们都在IE9上工作。
我试过任何我知道的东西，把它们结合起来，但没有成功。我能请古鲁帮忙吗？child. <-- I need this to call Prin
浏览 2提问于2014-08-29得票数 2
4回答
CSS屏幕和打印问题
html、css
我需要根据HTML在屏幕上显示以下div，但当我打印索赔人姓名、案例信息、联系人、文件应打印在第一页和索赔人姓名时，服务应打印在第二页。 <div>Claimant Name</div>
<div>Case Info</di
浏览 2提问于2011-02-04得票数 1
回答已采纳
5回答
如何打印可滚动的DIV内容
javascript、css、html
有一个网站，我想打印它的div内容。问题是div是可滚动的，我不能打印所有的内容。除了我想打印的那个，我已经在所有的div上尝试了display:none，然后使用了Google Chrome的Awesome扩展，但它不会只滚动那个div。我猜我读过关于在HTML中使用Javascript的文章，但我不知道如何使用这些代码。这不
浏览 0提问于2013-05-31得票数 18
回答已采纳
1回答
水印CSS在打印时不起作用
html、css
z-index:1000; left:15%; filter:alpha(opacity=50);以及我的html页面中的以下div<p style="font-size:70px">Duplicate Copy</p>上面
浏览 4提问于2012-12-18得票数 2
回答已采纳
2回答
打印div内容时会占用空间和空白页
javascript、html、css
我想使用按钮上的onclick()函数和window.print()属性来打印带有id的特定<div>。 body * { } #printpage * {
visibilit
浏览 2提问于2018-10-10得票数 0
1回答
无法通过privateip:631访问CUPS服务器
amazon-web-services、cups
我已经在AWS lightsail ubuntu 16.03中部署了一个虚拟机实例，并且我是新手，我不知道如何在导航到publicip:631it works it open gui interface时使cups可访问，但当我单击添加打印机时，它会将我导航到privateip:631，这是不可访问的，我想使用添加打印机功能，请帮助为我糟糕的英语道歉外网ip<e
浏览 8提问于2020-03-11得票数 0
1回答
我想打印带有外部样式表的div节
javascript、php、jquery、html、css
我想打印一个div节。如何打印与网页上显示的div相同的div？我的代码是//
浏览 11提问于2017-02-15得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
