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. Python之QRCode

    目录 一.基本介绍 介绍 QRCode二维码版本展示 QRCode方法 常用函数 二.安装QRCode 三.基本案例 生成普通二维码: 生成带有图片的二维码: 四.制作动态二维码 安装 myqr 和 ...

  2. Leetcode数组题*3

    目录 Leetcode数组题*3 66.加一 题目描述 思路分析 88.合并两个有序数组 题目描述 思路分析 167.两数之和Ⅱ-输入有序数组 题目描述 思路分析 Leetcode数组题*3 66.加 ...

  3. mysql cmd 常用命令

    环境变量配置配置好以后,打开cmd 连接:mysql -h主机地址 -u用户名 -p用户密码 (注:u与root可以不用加空格,其它也一样) 断开:exit (回车) 创建授权:grant selec ...

  4. Servlet与idea

    1.idea会为每一个Tomcat部署的项目,独立建一份配置文件. 配置文件所在位置 怎么部署的?使用的第三种部署方式(查看虚拟目录) docBase部署项目存放的路径 项目目录和Tomcat部署目录 ...

  5. 1.spring源码-BeanPostProcessor后置处理器

    1.BeanPostProcessor接口的介绍: BeanPostProcessor是一个接口,其中有两个方法,postProcessBeforeInitialization和postProcess ...

  6. C语言修炼之二

    1.内存操作: (1)内存指针.函数指针: (2)动态内存谁申请谁释放(malloc和free成对出现). 2.

  7. 2019牛客多校第五场 G subsequence 1 dp+组合数学

    subsequence 1 题意 给出两个数字串s,t,求s的子序列中在数值上大于t串的数量 分析 数字大于另一个数字,要么位数多,要么位数相同,字典序大,位数多可以很方便地用组合数学来解决,所以只剩 ...

  8. [一本通学习笔记] 最近公共祖先LCA

    本节内容过于暴力没什么好说的.借着这个专题改掉写倍增的陋习,虽然写链剖代码长了点不过常数小还是很香. 10130. 「一本通 4.4 例 1」点的距离 #include <bits/stdc++ ...

  9. python property(不动产)方法

    class Test(object): @property def test(self): return 100 @test.setter def test(self): return "修 ...

  10. Python_初识面向对象

    楔子 你现在是一家游戏公司的开发人员,现在需要你开发一款叫做<人狗大战>的游戏,你就思考呀,人狗作战,那至少需要2个角色,一个是人, 一个是狗,且人和狗都有不同的技能,比如人拿棍打狗, 狗 ...