2020-02-19 | chrome 79.0.3945.130 测试无问题 未做兼容测试

原理为调用 window.print() 方法,但是该方法只能对当前页面全部打印,所以有了以下方案来解决局部打印

1: 利用 iframe 将需要打印的元素和样式注入 再调用打印

// 示例代码
function print () {
let ifElement = document.getElementById('ifId')
const addHtmlPrint = () => {
const content = ifElement.contentWindow || ifElement.contentDocument
content.document.body.innerHTML = this.detailTable
const styleEle = document.createElement('style')
/* 去掉打印时的页头和页脚 */
styleEle.innerHTML = '@media print {@page { margin: 5mm; }}'
content.document.getElementsByTagName('head')[0].appendChild(styleEle) /* 保障 iframe 中资源加载完成,图片要用 img 形式引入 */
ifElement.onload = () => {
content.print()
}
}
this.getDetailTable() if (ifElement) {
// 若已经创建,则直接打印
addHtmlPrint()
} else {
ifElement = document.createElement('iframe')
ifElement.setAttribute('id', 'ifId')
ifElement.setAttribute('style', 'display:none')
document.body.appendChild(ifElement) addHtmlPrint()
}
}

2: 利用 @media print,在当前页面设置打印操作时需要隐藏的元素

@media print{
/* 这里将不需要打印的元素设置为不显示 */
.hidden-element{
display:none;
/* visibility:hidden; */
}
/*纸张设置为宽1200px 高800px*/
@page{
size:1200px 800px;
}
}

  • <link href="/example.css" media="print" rel="stylesheet" /> 标注打印时才会采用的样式

  • 监听打印事件 window.addEventListener('beforeprint|| afterprint', ()=> {});

最后推荐一个插件:https://printjs.crabbly.com/#documentation

欢迎交流 Github

html 打印相关操作与实现的更多相关文章

  1. 路径打印(set以及字符串的相关操作)

    题目链接 题目描述 给你一串路径,譬如: a\b\c a\d\e b\cst d\ 你把这些路径中蕴含的目录结构给画出来,子目录直接列在父目录下面,并比父目录向右缩一格,就像这样: a   b     ...

  2. python操作mysql数据库的相关操作实例

    python操作mysql数据库的相关操作实例 # -*- coding: utf-8 -*- #python operate mysql database import MySQLdb #数据库名称 ...

  3. (转)打印相关_C#图片处理Bitmap位图缩放和剪裁

    原文地址:http://blog.sina.com.cn/s/blog_6427a6b50101el9d.html 在GDI+中,缩放和剪裁可以看作同一个操作,无非就是原始区域的选择不同罢了. /// ...

  4. python 集合相关操作

    集合相关操作 集合是一个无序的,不重复的数据组合,它有着两个主要作用:去重以及关系测试. 去重指的是当把一个列表变成了集合,其中重复的内容就自动的被去掉了 关系测试指的是,测试两组数据之间的交集.差集 ...

  5. Django—models相关操作

    一.在django后台admin管理页面添加自己增加的表结构 通过终端命令:python3 manage.py makemigrations, python3 manage.py migrate 我们 ...

  6. DateTimeHelper【日期类型与字符串互转以及日期对比相关操作】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 实现日期和字符串之间的转换以及日期的相关操作: 1.日期格式的字符串输出为Date类型: 2.将Date类型以指定格式输出: 3.将 ...

  7. Django框架详细介绍---ORM相关操作

    Django ORM相关操作 官方文档: https://docs.djangoproject.com/en/2.0/ref/models/querysets/ 1.必须掌握的十三个方法 <1& ...

  8. Linux之文档与目录结构 目录的相关操作 Linux的文件系统

    Linux之文档与目录结构   Linux文件系统结构 Linux目录结构的组织形式和Windows有很大的不同.首先Linux没有“盘(C盘.D盘.E盘)”的概念.已经建立文件系统的硬盘分区被挂载到 ...

  9. 2.19 cookie相关操作

    2.19 cookie相关操作 前言虽然cookie相关操作在平常ui自动化中用得少,偶尔也会用到,比如登录有图形验证码,可以通过绕过验证码方式,添加cookie方法登录.登录后换账号登录时候,也可作 ...

随机推荐

  1. DOM操作节点对象集合

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  2. 笔记本u盘插上不显示

    u盘突然拔出笔记本再次插入时不显示: 解决方法:我的电脑-设备管理器-其他设备(你的U盘驱动)-卸载 再重新插上去,即可显示

  3. Windows下解决github push failed (remote: Permission to userA/XXXX.git denied to userB.) 上传gitHub失败报错

    Windows环境下解决 github push failed (remote: Permission to userA/XXXX.git denied to userB.) · 初学GitHub的朋 ...

  4. TODO:如何模拟cpu打满,磁盘打满,网卡打满

    背景: 测试活动中,需要构造cpu打满.磁盘打满.网卡打满的场景 场景1:cpu打满 环境信息: 虚拟机,物理核数16个,每个物理核的虚拟核数1个,虚拟核数16个: [root@vm10-0-0-8 ...

  5. centos7安装谷歌浏览器

    1. 安装: 考虑到国内无法访问Google,所以需要自己配置yum源: 1.在目录 /etc/yum.repos.d/ 下新建google-chrome.repo文件,命令如下: 1.cd /ect ...

  6. 三分钟快速上手TensorFlow 2.0 (下)——模型的部署 、大规模训练、加速

    前文:三分钟快速上手TensorFlow 2.0 (中)——常用模块和模型的部署 TensorFlow 模型导出 使用 SavedModel 完整导出模型 不仅包含参数的权值,还包含计算的流程(即计算 ...

  7. bbs论坛注册功能(1)

    分析项目需求创建表: STATICFILE_DIR = [ os.path.join(BASE_DIR,'static') #设置目录,bootstrip添加到目录中去,直接本地调用 ] # auth ...

  8. ubuntu---yolo报错darknet: ./src/cuda.c:36: check_error: Assertion `0' failed.

    装好darknet后,直接测试的时候,报错: darknet: ./src/cuda.c:36: check_error: Assertion `0' failed.解决办法是打开yolov3.cfg ...

  9. SQL中 select count(1) count中的1 到底是什么意思呢?和count(*)的区别

    count(1),其实就是计算一共有多少符合条件的行. 1并不是表示第一个字段,而是表示一个固定值.其实就可以想成表中有这么一个字段,这个字段就是固定值1,count(1),就是计算一共有多少个1.同 ...

  10. selenium grid的使用

    Selenium grid是用来分布式执行测试用例脚本的工具,比如测试人员经常要测试多浏览器的兼容性,那就可以用到grid了. selenium grid的hub相当于一个接收脚本并分发脚本的角色,n ...