JS局部打印两种方法

所有浏览器都可以

复制代码
<html>
<head title="">
    <title>测试打印</title>
    <style media="print">
        /*只应用于打印的样式*/
        .noprint {
            display: none;
        }
    </style>
    <script>
//通过标签控制
function printDiv1(oper) { bdhtml = window.document.body.innerHTML;//获取当前页的html代码 sprnstr = "<!--startprint" + oper + "-->";//设置打印开始区域 eprnstr = "<!--endprint" + oper + "-->";//设置打印结束区域 prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr) + 18); //从开始代码向后取html prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));//从结束代码向前取html window.document.body.innerHTML = prnhtml; window.print();
window.document.body.innerHTML = bdhtml; } //通过样式控制
function printDiv2() { window.print(); } </script> </head> <body> <!--startprint1--> <div>需要打印的(如需打印背景: 在Internet选项--高级--在“打印”一项选上“打印背景颜色和图象”)</div> <!--endprint1--> <div class="noprint"> <div>不需要打印的</div> <input type="button" value="打印(innerHTML法)" onclick="printDiv1(1);" /> <input type="button" value="打印(样式法)" onclick="printDiv2();" /> </div> </body> </html>
复制代码

如何打印背景:

IE: 在Internet选项--高级--在“打印”一项选上“打印背景颜色和图象”

或者新版的IE:

Firefox:

Chrome:

 

posted @   xachary  阅读(2130)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
点击右上角即可分享
微信分享提示