/**
* [print part area of html page]
* @Author JohnnyZen
* @DateTime 2017-10-23
* @copyright [johnny.weily]
* @license [license]
* @version [1.0]
* @link http://www.johnnyzen.cn/
* @required itemX
* @param { } [varname] [description]
* @return {[type]} [description]
*/
function print(areaId) {
// 获取当前页的html代码
var bdhtml = window.document.body.innerHTML
// 设置打印开始区域
//var startStr = '<!--startprint-->';
// 设置打印结束区域
//var endStr = '<!--endprint-->'
// 从标记里获取需要打印的页面
//var printHtml = bdhtml.substring(bdhtml.indexOf(startStr) + startStr.length, bdhtml.indexOf(endStr))
  // 也可以通过id获取
   var printHtml = areaId == undefined?document.body.innerHTML:document.getElementById(areaId).innerHTML;
// 需要打印的页面
window.document.body.innerHTML = printHtml
window.print();
// 还原界面
window.document.body.innerHTML = bdhtml
//window.location.reload();
}
//精髓
window.document.body.innerHTML = document.getElementById("header").innerHTML;
window.print();

JavaScript之打印页面局部区域的更多相关文章

  1. vue 打印页面部分区域

    1. vue项目打印页面部分区域 2. 原生js实现页面局部打印功能 3. vue项目中将table组件导出Excel表格以及打印页面内容

  2. JS打印页面指定区域

    错误的写法: //打印 function printPage(areaId) { if (parent.$("#PrinFrame").length == 0) { parent. ...

  3. js打印页面指定区域,并去掉页眉上的时间和请求路径

    需要通过js打印指定页面的内容 <style media=print type="text/css"> .noprint{visibility:hidden} < ...

  4. Javascript动态调整文章的行距、字体、颜色,及打印页面和关闭窗口功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. JS调用iframe方式实现Web区域打印页面内容

    1.程序说明 1) 此程序可以实现选择页面中的区域进行打印,以iframe方式进行打印: 2) 与原生态的print() 区别在于,取消打印页面后可以完整保留当前访问页面的内容. 2.代码部分 1) ...

  6. 打印web页面指定区域的三种方法

    本文和大家分享一下web页面实现指定区域打印功能的三种方法,一起来看下吧. 第一种方法:使用CSS 定义一 个.noprint的class,将不打印的内容放入这个class内. 代码如下: <s ...

  7. javascript实现jsp页面的打印预览

    1.加载WebBrowser打印预览控件 <OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" heigh ...

  8. 一天JavaScript示例-判定web页面的区域

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. asp.net调用Lodop实现页面打印或局部打印,可进行打印设置或预览

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebPrint.aspx.cs ...

随机推荐

  1. 线性代数的本质与几何意义 02. 线性组合、张成的空间、基(3blue1brown 咪博士 图文注解版)

    1. 线性组合 接下来我们要换一个角度来看向量.以二维平面直角坐标系为例,i, j 分别是沿 2 个坐标轴方向的单位向量.那么坐标平面上的其他向量,例如 [ 3  -2 ] [3−与 i, j 是什么 ...

  2. BZOJ2214[Poi2011]Shift——模拟

    题目描述 Byteasar bought his son Bytie a set of blocks numbered from to and arranged them in a row in a ...

  3. day30 纸牌游戏

    import json from collections import namedtuple Card = namedtuple('Card', ['rank', 'suit']) # rank 牌面 ...

  4. BZOJ 1124: [POI2008]枪战Maf(构造 + 贪心)

    题意 有 \(n\) 个人,每个人手里有一把手枪.一开始所有人都选定一个人瞄准(有可能瞄准自己).然后他们按某个顺序开枪,且任意时刻只有一个人开枪. 因此,对于不同的开枪顺序,最后死的人也不同. 问最 ...

  5. BZOJ 4212: 神牛的养成计划

    4212: 神牛的养成计划 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 142  Solved: 30[Submit][Status][Discus ...

  6. POJ P3352 Road Construction 解题报告

    P3352 Road Construction 描述 这几乎是夏季,这意味着它几乎是夏季施工时间!今年,负责岛屿热带岛屿天堂道路的优秀人士,希望修复和升级岛上各个旅游景点之间的各种道路. 道路本身也很 ...

  7. docker安装Zabbix

    1. 先安装数据库mysqldocker run --name zabbix-mysql-server --hostname zabbix-mysql-server \-e MYSQL_ROOT_PA ...

  8. redis中的数据类型

    redis不是一个纯文本kv存储,实际上,它是一个数据结构服务,支持不同类型的value. 包含以下类型: 1.Binary-safe strings. 二进制安全的字符串 2.Lists: coll ...

  9. 使用electron为贪吃蛇游戏创建全局快捷键

    上图就是我们的简体版贪吃蛇游戏,我们可以看到使用键盘上面的上下左右可以对贪吃蛇进行控制. The picture above is our simplified version of Snake Ea ...

  10. Array 新增加的一些API用法

    es6中新增加了数组的一些用法,基本上是看例子就可以大致明白具体意思. Array.from Array.from方法用于将两类对象转为真正的数组:类似数组的对象和可遍历的对象(包括 ES6 新增的数 ...