window.print() 前端实现网页打印详解

简介: window.print() 前端实现网页打印详解



前言

print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容,我们可以在MDN上查看到相关的简单介绍。

一、print()方法

print() 方法用于打印当前窗口的内容。调用 print() 方法会产生一个打印预览弹框,让用户可以设置打印请求。最简单的打印就是直接调用window.print(),当然用 document.execCommand('print') 也可以达到同样的效果。默认打印页面中body里的所有内容。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>printDemo</title>
</head>
<body>
  <input type="button" value="打印此页面" onclick="printpage()" />
  <div>内容</div>
  <script>
    function printpage() {
      window.print()
    }
  </script>
</body>
</html>

二、打印样式

直接调用print()方法去打印网页内容,我们会发现,事先调整好的布局和样式都没法实现,那么有哪些方法可以帮助我们改善打印的用户体验呢?

2.1使用打印样式表

配置一份打印样式表print.css,引入到HTML文档,在 <link> 上加上一个 media="print" 来标识这是打印机才会应用的样式表,这样打印的时候,就会默认将该样式表应用到文档中

<link href="/path/print.css" media="print" rel="stylesheet" />

2.2使用媒介查询

当我们要修改的样式没有很多的时候,其实完全不需要重新写个样式表,只要写上一个媒介查询也可以达到同样的效果,如:

@media print {
  h1 {
    font-size: 20px;
    color: red;
  }
}

2.3内联样式使用media属性

<style type="text/css" media="print">
   // 打印样式
</style>

2.4在css中使用@import引入打印样式表

@import url("/path/print.css") print;

三、打印指定区域部分内容

3.1方法一

在需要打印的正文内容所对应的html开始处加上 <!--startprint--> 标识,结尾处加上 <!--endprint--> 标识,截取打印标识之间的内容替换body的内容,调用打印print()方法。

<body>
  <input type="button" value="打印此页面" onclick="printpage()" />
  <!--startprint-->
  <div id="printContent">打印内容</div>
  <!--endprint-->
  <script>
    function printpage() {
      let oldStr = window.document.body.innerHTML; // 获取body的内容
      let start = "<!--startprint-->"; // 开始打印标识, 17个字符
      let end = "<!--endprint-->"; // 结束打印标识
      let newStr = oldStr.substr(oldStr.indexOf(start) + 17); // 截取开始打印标识之后的内容
      newStr = newStr.substring(0, newStr.indexOf(end)); // 截取开始打印标识和结束打印标识之间的内容
      window.document.body.innerHTML = newStr; // 把需要打印的指定内容赋给body
      window.print(); // 调用浏览器的打印功能打印指定区域
      window.document.body.innerHTML = oldStr; // body替换为原来的内容
    }
  </script>
</body>

3.2方法二

将需要打印的内容用一个大的div包裹,打印时将body的内容替换为该div的内容,调用打印print()方法。

<body>
  <input type="button" value="打印此页面" onclick="printpage()" />
  <div id="printContent">打印内容</div>
  <script>
    function printpage() {
      let newstr = document.getElementById("printContent").innerHTML;
      let oldstr = document.body.innerHTML;
      document.body.innerHTML = newstr;
      window.print();
      document.body.innerHTML = oldstr;
      return false;
    }
  </script>
</body>

3.3方法三

有两个事件可以监听到到打印事件,一个是onbeforeprint(),一个是onafterprint(),分别表示打印事件触发前后。

检测打印请求,提供一个打印前的处理事件onbeforeprint() 将一些不需要打印的元素隐藏,和打印后的处理事件 onafterprint()放开隐藏的元素。

window.onbeforeprint = function(event) {
      //将一些不需要打印的元素隐藏
    };
    window.onafterprint = function(event) {
      //放开隐藏的元素
    };

四、强制插入分页

4.1page-break-before(指定元素前添加分页符)

/* 在h1元素前始终插入分页符 */
@media print {
    h1 {page-break-before: always;}
}

4.2page-break-after(指定元素后添加分页符)

/* 在 .footer 元素后始终插入分页符 */
@media print {
    .footer {page-break-after: always;}
}

4.3page-break-inside(用于设置是否在指定元素中插入分页符

/* 避免在 <pre> 与 <blockquote> 元素中插入分页符 */
@media print {
    pre, blockquote {page-break-inside: avoid;}
}

 

4.4注意

  1. 不能对绝对定位的元素使用以上三种分页属性。
  2. 请尽可能少地使用分页属性,并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。

五、设置打印布局(横向、纵向、边距)

@media print {
    @page {
      /* 纵向 */
      size: portrait; 
      /* 横向 */
      size: landscape;
      /* 边距 上右下左 */
      margin: 1cm 2cm 1cm 2cm;
    }
  }

六、去除浏览器默认页眉页脚

页眉打印默认有页眉页脚信息,展现到页面外边距范围,我们可以通过去除页面模型page的外边距,使得内容不会延伸到页面的边缘,再通过设置 body 元素的 margin 来保证 A4 纸打印出来的页面带有外边距

@media print {
  @page {
    margin: 0;
  }
  body {
    margin: 1cm;
  }
}

七、打印方法封装

window.print();

注意:如果有高级的玩法主要有以下

不想打印页面的某某某dom,按钮啦啥的,但是又必须在页面上展示,只需在

方法1:@media print 媒体查询里面让对应元素隐藏 display:none;

方法2:在js里面让他内容先变空等等

原理就是在页面不展示这个dom

原理就是在页面不展示这个dom

原理就是在页面不展示这个dom

目录
相关文章
|
24天前
|
缓存 前端开发 JavaScript
前端开发的必修课:如何让你的网页在弱网环境下依然流畅运行?
【10月更文挑战第30天】随着移动互联网的普及,弱网环境下的网页性能优化变得尤为重要。本文详细介绍了如何通过了解网络状况、优化资源加载、减少HTTP请求、调整弱网参数和代码优化等方法,提升网页在弱网环境下的加载速度和流畅性,从而改善用户体验。
104 4
|
2月前
|
存储 前端开发 JavaScript
🚀前端轻松实现网页内容转换:一键复制、保存图片及生成 Markdown
在现代前端开发中,提升用户的交互体验至关重要。本文将详细介绍如何使用 HTML2Canvas 和 Turndown 两个强大的 JavaScript 库,实现将网页选中文本转化为图片并保存或复制到剪贴板,或将内容转换为 Markdown 格式。文章包含核心代码实现、技术细节和功能拓展方向,为开发者提供了一个轻量级的解决方案,提升用户体验。
146 68
|
16天前
|
XML 前端开发 JavaScript
前端大神揭秘:如何让你的网页秒变炫酷,让用户欲罢不能的5大绝招!
前端开发不仅是技术活,更是艺术创作。本文揭秘五大前端开发技巧,包括合理运用CSS动画、SVG图形、现代JavaScript框架、优化网页性能及注重细节设计,助你打造炫酷网页,提升用户体验。
60 30
|
17天前
|
存储 编解码 前端开发
惊!前端新手也能秒懂的高级技巧,轻松提升网页颜值与性能!
本文针对前端新手,介绍了三个简单易学的高级技巧,帮助提升网页的颜值和性能。包括使用CSS框架快速美化网页、优化图片资源加快加载速度,以及利用ARIA属性和媒体查询提高网页的可访问性和响应性。示例代码清晰,适合初学者上手实践。
26 3
|
20天前
|
存储 前端开发 搜索推荐
(前端直接编辑CAD)网页CAD二次开发中线型表的使用方法
在DWG数据库中,线型样式存储在线型样式表 `McDbLinetypeTable` 中,每个线型表记录对象 `McDbLinetypeTableRecord` 对应一种线型样式。本文介绍了如何获取、添加、遍历、删除和修改线型样式,并提供了绘制不同线型的示例代码,包括虚线、点划线和带文字的线型。通过在线示例demo,用户可以实践修改CAD图纸中的实体线型及其样式。
|
23天前
|
搜索推荐 前端开发 开发者
前端开发的必修课:如何让你的网页在搜索引擎中脱颖而出?
【10月更文挑战第31天】前端开发不仅是构建网页与用户间桥梁的关键,还需注重搜索引擎优化(SEO)。优化网页结构、合理使用关键词、提升加载速度及整合社交媒体等技巧,能帮助网页在搜索引擎中脱颖而出,吸引更多用户。
29 5
|
23天前
|
机器学习/深度学习 前端开发 JavaScript
前端小白也能学会的高大上技巧:如何让你的网页支持语音控制?
【10月更文挑战第31天】你是否曾梦想过只需动动嘴皮子就能操控网页?现在,这个梦想触手可及。即使你是前端小白,也能轻松学会让网页支持语音控制的高大上技巧。本文将介绍语音控制的基本概念、实现方法和具体示例,带你走进语音控制的奇妙世界。通过Web Speech API,你只需掌握基本的HTML、CSS和JavaScript知识,就能实现语音识别和控制功能。快来尝试吧!
81 4
|
24天前
|
前端开发 JavaScript 搜索推荐
前端小白也能学会的高大上技巧:如何让你的网页支持暗黑模式?
【10月更文挑战第30天】随着现代网页设计的发展,暗黑模式已成为一种流行趋势,提升了用户的阅读体验并增强了网页的适应性。本文介绍了如何通过简单的HTML、CSS和JavaScript实现网页的暗黑模式。首先,定义两种主题的CSS样式;然后,使用JavaScript实现模式切换逻辑,并自动检测系统主题。通过这些步骤,前端小白也能轻松掌握暗黑模式的实现,提升网页的用户体验和个性化水平。
45 4
|
23天前
|
前端开发 JavaScript 数据处理
前端界的宝藏技术:掌握这些,让你的网页秒变交互神器!
【10月更文挑战第31天】前端开发藏有众多宝藏技术,如JavaScript异步编程和Web Components。异步编程通过Promise、async/await实现复杂的网络请求,提高代码可读性;Web Components则允许创建可重用、封装良好的自定义组件,提升代码复用性和独立性。此外,CSS动画、SVG绘图等技术也极大丰富了网页的视觉和交互体验。不断学习和实践,让网页秒变交互神器。
24 2
|
24天前
|
编解码 前端开发 开发者
前端开发的必修课:如何让你的网页在不同设备上完美呈现?
【10月更文挑战第30天】随着互联网的普及,用户访问网页的设备种类繁多。前端开发者需确保网页在不同设备上完美呈现。本文介绍了一些最佳实践,包括使用响应式设计、相对单位、灵活的图片和视频、测试与优化及考虑交互设计,帮助实现跨设备兼容。
31 2