html打印页面demo,Window.print()打印整个网站中的部分内容,打印后,原网页保持不变...

想要达到打印整个网站中的部分内容且完成打印后原网页保持不变的效果,搜到以下资料:

window.print打印指定网页区域的方法

JavaScript页面打印(只打印指定部分)

JS打印指定页面且去样式后的内容,window.print

都能达到打印整个网站中的部分内容,但是,打印后,网页就剩下了打印的内容,其他内容全部被隐藏了,这不是我想要的,最终找到Javascript Print iframe contents only这个链接里的被采纳回答的例子,结合自己的需要,达到了想要的效果。

以上资料里各种方法的利弊都说得很清楚了,我就不废话了,直接看demo吧。

demo

html代码:

不打印的内容部分//

<< 返回

//要打印的内容部分//

js代码:

function printPage() {

//获取当前页的html代码

var bodyhtml = window.document.body.innerHTML;

//设置打印开始区域、结束区域

var startFlag = "";

var endFlag = "";

// 要打印的部分

var printhtml = bodyhtml.substring(bodyhtml.indexOf(startFlag),

bodyhtml.indexOf(endFlag));

// 生成并打印ifrme

var f = document.getElementById('printf');

f.contentDocument.write(printhtml);

f.contentDocument.close();

f.contentWindow.print();

}

效果截图

bVAksB?w=1012&h=164

bVAksL?w=1253&h=624

打印取消后,页面还是第一张图那样子的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值