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

news/2024/4/28 13:37:26/文章来源:https://blog.csdn.net/weixin_33698823/article/details/89325359

想要达到打印整个网站中的部分内容且完成打印后原网页保持不变的效果,搜到以下资料:
window.print打印指定网页区域的方法
JavaScript页面打印(只打印指定部分)
JS打印指定页面且去样式后的内容,window.print
都能达到打印整个网站中的部分内容,但是,打印后,网页就剩下了打印的内容,其他内容全部被隐藏了,这不是我想要的,最终找到Javascript Print iframe contents only这个链接里的被采纳回答的例子,结合自己的需要,达到了想要的效果。

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

demo

html代码:

<table align="center" class="ml70"><tbody><tr><td colspan="8"><div align="center"><b><span >不打印的内容部分//</span></b></div><div></tr></tbody></table><a href="#" onclick="javascript:history.back(1); event.returnValue=false"><< 返回</a><br /><!--startprint--><br /><table align="center" class="ml70"><tbody><tr><td colspan="8"><div align="center"><b><span >//要打印的内容部分//</span></b></div><div></tr></tbody></table><!--endprint--><input type="button" value="打印" onClick="printPage()" /><iframe id="printf" src="" width="0" height="0" frameborder="0"></iframe>

js代码:

 <script type="text/javascript">  function printPage() {  //获取当前页的html代码  var bodyhtml = window.document.body.innerHTML;  //设置打印开始区域、结束区域  var startFlag = "<!--startprint-->";  var endFlag = "<!--endprint-->";  // 要打印的部分  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();}  </script>

效果截图

图片描述

图片描述

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_826604.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java网站模版 Bootstrap HTML5 企业源码

获取【下载地址】 【免费支持更新】三大数据库 mysql oracle sqlsever 更专业、更强悍、适合不同用户群体【新录针对本系统的视频教程&#xff0c;手把手教开发一个模块&#xff0c;快速掌握本系统】A 集成代码生成器 [正反双向(单表、主表、明细表、树形表&#xff0c…

SEOer未来发展的两个方向

闲言碎语不多讲了&#xff0c;今天的话题是一位朋友提出来的&#xff1a;“老师&#xff0c;百度近期做了这么多调整&#xff0c;SEO的春天来了还是冬天来了呢?现在学习SEO的话&#xff0c;应该向哪个方向发展呢?”这段时间百度确实压力不小&#xff0c;先是“魏则西事件”迫…

lamp服务器硬件,配置LAMP服务器网站架构

配置LAMP服务器网站架构LAMP指的Linux(操作系统)、ApacheHTTP 服务器&#xff0c;MySQL(有时也指MariaDB&#xff0c;数据库软件) 和PHP(有时也是指Perl或Python) 的第一个字母&#xff0c;一般用来建立web应用平台。结构拓扑httpd服务器配置安装环境yum install httpd -y修改h…

推荐一个ASP.NET网站内容管理系统源码

许多人都有各自的兴趣&#xff0c;如打球、踢毽子、看书、看电视、玩游戏等等....我近来迷上了猜灯谜&#xff0c;于是业余做了一个在线猜灯谜的网站&#xff1a;何问起谜语。先出个谜语让你猜猜&#xff1a;不可缺一点&#xff08;打一字&#xff09;。可以在线猜&#xff1a;…

中国开发者如何更便捷地浏览Google开发者网站?

作者&#xff1a;陈卓&#xff0c;Google 开发技术推广工程师在 2016 年 12 月份举行的 Google 开发者大会上&#xff0c;Google 发布了几个谷歌开发者中国网站&#xff0c;帮助中国的开发者们更方便地访问 Google 技术文档资源、学习相关 Google 技术。为了帮助读者们更加方便…

像淘宝、京东这样的大型电商网站服务器构架完全部署方案

任何一个大型网站都是经历用户积累然后成长&#xff0c;从一台服务器到多台服务器才能构架支撑网站现有数据、用户、页面请求等。大型网站(如淘宝、京东等)的系统架构并不是开始设计就具备完整的高性能、高可用、安全等特性&#xff0c;它总是随着用户量的增加&#xff0c;业务…

又闹事!伊拉克黑客Pro_Mast3r纂改了特朗普竞选网站的子域名

本文讲的是又闹事&#xff01;伊拉克黑客Pro_Mast3r纂改了特朗普竞选网站的子域名&#xff0c;特朗普自从参与竞选以来&#xff0c;一直话题不断&#xff0c;尤其是有关网络安全的话题更是令人不安。近日又有报道称&#xff0c;一个来自伊拉克的黑客组织“Pro_Mast3r”于上周日…

基于Yahoo网站性能优化的34条军规及自己的见解

1、尽量减少HTTP请求次数 终端用户响应的时间中&#xff0c;有80%用于下载各项内容&#xff0c;这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数&#xff0c;这是提高网页速度的关键步骤。 减少页面组件的方法其实就是简化…

【网站建设】搭建简单动态网站

2019独角兽企业重金招聘Python工程师标准>>> 课程介绍 通过前面Clouder课程的学习&#xff0c;或许你已经掌握了在云服务器上发布和部署静态网页的方法&#xff0c;那么如何搭建一个可以随时更新内容的动态网站&#xff1f;通过本课程的学习&#xff0c;你将掌握如何…

大型网站架构演变和知识体系

转载&#xff1a;http://www.blogjava.net/BlueDavy/archive/2008/09/03/226749.html 大型网站架构演变和知识体系 之前也有一些介绍大型网站架构演变的文章&#xff0c;例如LiveJournal的、ebay的&#xff0c;都是非常值得参考的&#xff0c;不过感觉他们讲的更多的是每次演变…

日志处理实战:一个外卖网站解决方案(持续更新中)

背景 “我要点外卖“是一个平台型电商网站&#xff0c;用户、餐厅、配送员等。用户可以在网页、App、微信、支付宝等进行下单点菜&#xff1b;商家拿到订单后开始加工&#xff0c;并自动通知周围的快递员&#xff1b;快递员将外卖送到用户手中。 在运营的过程中&#xff0c;发现…

深度学习驱动智能搜索引擎,RankBrain革了SEO的命

去年开始&#xff0c;谷歌使用以深度学习为基础的人工智能核心搜索算法RankBrain&#xff0c;用越来越“类人化”的算法个性定制每个搜索结果。 【编者按】本文由新智元编译&#xff0c;来源&#xff1a;techcrunch&#xff0c;作者&#xff1a;John Rampton&#xff0c;译者&…

C#ASP.NET打包安装部署文件一键安装网站,包括IIS站点创建、数据库附加。

最近在开发web网站安装部署&#xff0c;以前从来没有做过web的安装打包没有头绪就开始上网查资料。 查了两天资料发现网上的资料要么不全要么就有错误&#xff0c;我就总结了网上的资料重新整理的一番&#xff0c;经过本人测试可用无错误 一下为借鉴部分资料的原文地址 此链接为…

服务器的购买与网站的创建

服务器的购买、配置、以及网站的搭建本文提供全流程&#xff0c;中文翻译。 Chinar 坚持将简单的生活方式&#xff0c;带给世人&#xff01;&#xff08;拥有更好的阅读体验 —— 高分辨率用户请根据需求调整网页缩放比例&#xff09; Chinar —— 心分享、心创新&#xff01;…

网站攻防

1.创建实验后&#xff0c;打开实验网址&#xff1a;192.168.5.13&#xff0c;界面如下&#xff1a; 2.通过在网址后添加常用的后台指令来尝试是否能进入后台&#xff0c;如admin、admin.php等&#xff1a; 3.从上一步可以看出&#xff0c;无法通过admin等方式进入后台&#xff…

.net发布网站步骤

本文章分为三个部分: web网站发布、IIS6 安装方法、ASP.NET v4.0 安装方法 一、web网站发布 1.打开 Visual Studio 2013 编译环境 2.在其解决方案上右击弹出重新生成解决方案,以查看是否有错误 3.如果项目没有错误右击WebUI层发布 4.这样将会看到以下界面 5.在配置文件中新建配…

嵌入式学习路线怎么学?开发嵌入式培训网站推荐

在这个互联网的快速发展的时代&#xff0c;科技不断的创新嵌入式也开始逐渐的越来越火热&#xff0c;随着这一股风波也有越来越多的人投入到嵌入式开发的行列中来&#xff0c;那么想要学习嵌入式&#xff0c;该从哪里入手学习&#xff0c;嵌入式学习路线图怎么学&#xff1f;想…

html手机网页新闻模板,新浪手机新闻网站模板首页html源码

【实例简介】新浪手机html网页模板【实例截图】【核心代码】新浪手机新闻网站模板首页html源码├── css│ ├── add2home.min.css│ ├── blue1.css│ ├── channel.min.js│ ├── common.min.css│ ├── home.min.css│ └── style.min.css├── i…

国外最火的电商网站magento2:系列(一)虚拟机、centos7的安装

能了解什么&#xff1a; 本系列将会带你从0到1学会安装magento2&#xff01; 1.虚拟机的安装&#xff0c;centos7.2镜像的下载安装 2.下载并且配置nginx 3.下载并且配置php 4.让nginx适配magento2 5.下载并且配置magento2 6.安装过程中遇到的报错&#xff0c;问题 其中的整个中…

Java 专业人士必备的书籍和网站列表

对于 Java™ 语言开发人员来说&#xff0c;信息过量是一个真正的问题。每个新入行的程序员都要面临一个令人畏缩的挑战&#xff1a;要进入的行业是一个具有海量知识的行业。要了解的东西简直太多了。对于有经验的老手来说&#xff0c;情况只有些微好转。知识量总在增大&#xf…