用window.print()函数打印网页指定区域的内容

最新推荐文章于 2024-08-09 09:58:32 发布
最新推荐文章于 2024-08-09 09:58:32 发布
阅读量3.6k 收藏
点赞数
分类专栏： javascript
      1. <!--window.print打印指定div  
      2. window.print可以打印网页，但有时候我们只希望打印特定控件或内容，怎么办呢？  
      3.   
      4. 首先我们可以把要打印的内容放在div中，然后用下面的代码进行打印。  
      5. -->  
      6. <html>  
      7. <head>  
      8. <script language="javascript">  
      9. function printdiv(printpage)  
      10. {  
      11. var headstr = "<html><head><title></title></head><body>";  
      12. var footstr = "</body>";  
      13. var printData = document.getElementById("dvData").innerHTML; 获得 div 里的所有 html 数据
      14. var oldstr = document.body.innerHTML;  
      15. document.body.innerHTML = headstr+newstr+footstr;  
      16. window.print();  
      17. document.body.innerHTML = oldstr;  
      18. return false;  
      19. }  
      20. </script>  
      21. <title>div print</title>  
      22. </head>  
      23.   
      24. <body>  
      25. //HTML Page  
      26. //Other content you wouldn't like to print  
      27. <input name="b_print" type="button" class="ipt"   onClick="printdiv('div_print');" value=" Print ">  
      28.   
      29. <div id="div_print">  
      30.   
      31. <h1 style="Color:Red">The Div content which you want to print</h1>  
      32.   
      33. </div>  
      34. //Other content you wouldn't like to print  
      35. //Other content you wouldn't like to print  
      36. </body>  
      37.   
      38. </html> 


同理：

用 JavaScript 实现页面数据的打印 ： 主要是用到了一个 print() 函数 ， 该函数将会打印整个 web 页面 body 内的所有 html 数据 ! 使用方法为 window.print(); 打印页面上局部的数据，则可以 用

//把数据嵌套在 一个 div 里，获得 div

var printData = document.getElementById("dvData").innerHTML; 获得 div 里的所有 html 数据

window.document.body.innerHTML = printData;   //把 html 里的数据 复制给 body 的 html 数据 ，相当于重置了 整个页面的 内容
window.print(); // 开始打印 

xuelinli
关注
专栏目录
在html页面中怎么打印区域,window.print打印指定div指定网页指定区域的方法
weixin_35793067的博客
06-03 1499
第一种方法：指定不打印区域使用CSS，定义一个.noprint的class，将不打印的内容放入这个class内。细如下：.noprint{visibility:hidden}要打印的内容。哈哈！将不打印的代码放在这里。打印第二种方法：指定打印区域把要打印的内容放入一个 span或div，然后通过一个函数打印。把要打印的内容放这里所有内容div2的内容打印function printme(){ do...
window.print打印指定div实例代码
09-04
在这种情况下，我们可以通过一些技巧来实现只打印指定的`div`内容。以下是如何使用`window.print`配合JavaScript实现这一目标的详细步骤和示例代码解析： 1. **创建包含要打印内容的`div`**： 在HTML中，将需要...
window.print()前端实现网页打印功能详解
菜鸟教程
05-08 2989
print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容，我们可以在MDN上查看到相关的简单介绍。到此这篇关于window.print()前端实现网页打印功能的文章就介绍到这了,更多相关window.print()前端网页打印内容请搜索网赚博客https://www.piaodoo.com/以前的文章或继续浏览下面的相关文章希望大家以后多多支持网赚博客https://www.piaodoo.com/！茂名一技http://www.szsyby.net/
window.print打印指定div指定网页指定区域的方法
09-04
主要介绍了window.print打印指定div指定网页指定区域的方法,需要的朋友可以参考下
Print 前端打印 (调用 windows 自带打印功能,打印指定 dom 元素内容)
最新发布
i_Satan的博客
08-09 838
window.print 打印自带页眉页脚，用于存放打印 url，日期时间，页面名称等内容。
window.print打印指定区域。
Helloworld2200的博客
10-26 1299
入jquery.PrintArea.min.js 把需要打印的区域用一个div包裹起来 要打印的区域 指定打印区域，调用打印方法。 $j(“#printArea”).printArea(); window.print(); 注意：不使用第三方控件，调用ie的window.print打印方法，很难去掉底部url和顶端的页码。可以在浏览器打印设置中去掉url和页码
window.print()打印指定区域
醒の笔记本
04-19 1535
第一种方法：指定不打印区域使用CSS，定义一个.noprint的class，将不打印的内容放入这个class内。详细如下：   .noprint{visibility:hidden}    要打印的内容。哈哈！<p class="noprint">将不打印的代码放在这里。<a href="javascrīpt:
window.print() 指定打印的区域
weixin_30237281的博客
03-01 305
function printDIV(printarea){ var head="";//先生成头部 var foot="";//生成尾部 var newstr=document.all.item(printarea).innerHTML;//获取指定打印区域 var oldstr=document.body.innerHTML;//获得原本页面的代码 document.body.inne...
window.print()打印指定区域内容
Misnice的博客
09-04 2093
myPrint(document.getElementById('page_for_word')); function myPrint(obj){ var newWindow=window.open("打印窗口","_blank"); var docStr = obj.innerHTML; newWindow.document.write(docStr); ...
html和js通过window.print()实现调用浏览器打印带背景图片和生成二维码的文件功能
10-23
首先，`window.print()` 方法是JavaScript中的一个全局函数，它会触发浏览器的打印对话框，允许用户选择打印当前页面或对其进行自定义设置。在调用此方法后，浏览器会尝试呈现当前窗口的内容，包括文本、图像、表格...
js window.print实现打印特定控件或内容
10-26
接下来，我们需要编写一个JavaScript函数，该函数会捕获这个div的内容，并在调用`window.print()`时仅打印这部分内容。这个函数可以如下所示： ```javascript function printdiv(printpage) { var headstr = ...
web打印 window.print()介绍
09-05
`window.print()` 是JavaScript中一个非常实用的函数，用于触发浏览器的打印对话框，让用户可以选择打印当前页面或部分内容。本文将详细介绍如何使用`window.print()` 实现Web打印，并提供示例代码帮助理解。 1. **...
window.print打印指定区域
hgg923的专栏
06-11 2091
doPrint() { // let originHtml = window.document.body.innerHTML; //需要打印的元素 let printHtml = document.getElementById("printDiv").innerHTML; console.log(printHtml); window.document.body.innerHTML = printHtml; window.print(); // 方式.
使用window.print（）打印特定区域的JS代码
热门推荐
magic_zj00的专栏
01-31 1万+
function printdiv(printpage) { var headstr = ""; var footstr = ""; var newstr = document.all.item(printpage).innerHTML; var oldstr = document.body.innerHTML; document.body.innerHTML = headstr+newstr+f
使用window.print() 打印指定的内容,并打印在一页纸上
web_houzhanguo的博客
11-11 1570
使用window.print() 打印指定的内容,并打印在一页纸上 html <!-- 打印的内容会生成两页纸 --> <div id="report"> <h1>..</h1> <----重点 <div>..</div> </div> javscript function doPrint(){ //根据div标签ID拿到div中的局部内容 let bdhtml=window.d
用window.print()打印指定div里面的内容
L511157586的博客
08-26 615
用window.print()打印指定div里面的内容 今天客户让添加个打印证照功能，直接用window.print()打印的是整个页面，而用以下方法就可以只打印证明了 <!--window.print打印指定div window.print可以打印网页，但有时候我们只希望打印特定控件或内容，怎么办呢？ 首先我们可以把要打印的内容放在div中，...
window.print 打印页面指定区域
W_ya24K的专栏
11-16 1376
这一阵子由于项目需要，需要在项目某页面下加一个打印的功能，在网上查过之后，知道了window.print 这个函数，这个函数可以很方便的打印当前窗口中的内容， 但是这个有时候并不能满足广大用户的需求；经过半天时间在网上浏览查阅后，发现一个很不错的解决方案，能够打印页面中指定的区域，现将代码贴下： function printThis() { var el = document.getE
window.print() 打印指定内容
06-09
如果需要打印页面中的指定内容，可以使用 HTML 的打印样式表（@media print）。这样可以在打印时隐藏不需要打印的内容，并且格式化需要打印的内容。下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>Print Example</title> <style> @media print { .no-print { display: none; } } </style> </head> <body> <h1 class="no-print">Print Example</h1> <p class="no-print">This is an example of printing an HTML page using JavaScript.</p> <div id="print-content"> <p>This is the content to be printed.</p> </div> <button class="no-print" onclick="printContent()">Print</button> <script> function printContent() { var content = document.getElementById("print-content").innerHTML; var printWindow = window.open('', '', 'height=400,width=800'); printWindow.document.write('<html><head><title>Print Content</title></head><body>'); printWindow.document.write(content); printWindow.document.write('</body></html>'); printWindow.document.close(); printWindow.print(); } </script> </body> </html> ``` 在上面的示例中，我们在 HTML 中定义了一个样式表（@media print），用于在打印时隐藏指定的元素（在本例中是标题和说明）。然后我们在页面中定义了一个需要打印的内容（在本例中是一个 div 元素），并且给这个 div 元素添加了一个 id（print-content）。接着我们定义了一个打印按钮，并且给按钮添加一个 onclick 事件，该事件会调用 printContent() 函数。 在 printContent() 函数中，首先获取需要打印的内容（即 print-content 元素的 innerHTML），然后创建一个新的浏览器窗口（使用 window.open() 方法）。接着我们在新窗口中写入需要打印的内容，并且调用 print() 方法进行打印。 需要注意的是，在新窗口中写入 HTML 代码时，需要在 head 标签中添加 title 标签，否则在某些浏览器中可能无法正常打印。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值