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. pandas模块详解

    Pandas模块 1.什么是pandas pandas是基于numpy构建的,用来做数据分析的 2.pandas能干什么 具备对其功能的数据结构DataFrame,Series 集成时间序列功能 提供 ...

  2. lua学习,笔者自用

    标识符与关键字A:常量用全大写和下划线,eg: My_ACCOUNTB: 变量的第一个字母小写,eg: strNumberC: 全局变量第一个字母用小写g表示,eg: gMyAcountD: 函数名第 ...

  3. 原来window 也可以使用pthreads

    https://blog.csdn.net/clever101/article/details/101029850

  4. 使用正则提取字符串中URL等信息

    一.说明 背景:最近在做同步京东商品信息时遇到一个问题,同步后的商品详情无法在富文本中修改,强制修改会导致图片无法正常显示,研究发现详情中的图片是在css的作为背景图指定的. 解决:经过多次尝试,最后 ...

  5. 2. 移动端测试工具 :bugtags

    http://blog.csdn.net/objectivepla/article/details/51037804   Bugtags 使用说明 https://www.bugtags.com/   ...

  6. rancher版本问题引发的节点注册失败失败

    rancher版本问题引发的节点注册失败失败 待办 https://www.cnblogs.com/Me1onRind/p/11147639.html

  7. bzoj1690:[Usaco2007 Dec]奶牛的旅行 (分数规划 && 二分 && spfa)

    用dfs优化的spfa判环很快啦 分数规划的题目啦 二分寻找最优值,用spfa判断能不能使 Σ(mid * t - p) > 0 最优的情况只能有一个环 因为如果有两个环,两个环都可以作为奶牛的 ...

  8. 题解【洛谷P2323】 [HNOI2006]公路修建问题

    题面 题解 跑两遍\(Kruskal\),第一次找出\(k\)条一级公路,第二次找出\(n - k - 1\)条二级公路,直接计算\(MST\)的权值之和即可. 代码 #include <ios ...

  9. 2.17NOIP模拟赛(by hzwer) T3 小奇回地球

    [题目背景] 开学了,小奇在回地球的路上,遇到了一个棘手的问题. [问题描述] 简单来说,它要从标号为 1 的星球到标号为 n 的星球,某一些星球之间有航线. 由于超时空隧道的存在,从一个星球到另一个 ...

  10. 【Python】【爬虫】爬取酷狗TOP500

    好啦好啦,那我们来拉开我们的爬虫之旅吧~~~ 这一只小爬虫是爬取酷狗TOP500的,使用的爬取手法简单粗暴,目的是帮大家初步窥探爬虫长啥样,后期会慢慢变得健壮起来的. 环境配置 在此之前需要下载一个谷 ...