React如何实现浏览器打印部分内容详析

2024-09-27 08:38:04

前言

近期着手项目任务的打印功能，在此作个记录，本文介绍基于React的一种调用浏览器打印页面指定内容的方法。

整体思路：通过构建一个隐藏的元素（该元素包裹需打印的内容），当打印行为触发时，将页面其他的一些不需要打印的元素隐藏，然后将需打印的元素追加到body中，打印完成后，再恢复初始状态即可。浏览器打印的本质还是将web页面中的元素打印出来而已。

1. 构建待打印元素

在页面中构建一个display为none的元素，里面的内容为你需要打印的内容。我们还需要设置包裹打印内容的元素的ref属性，以便于后面获取到元素。

<div style={{ display: 'none' }}>
 <div ref={el => (this.printRef = el)}>
 { 打印内容 }
 </div>
</div>

2. 打印动作触发时的处理

处理流程：

获取待打印元素；
将根元素隐藏；
将待打印元素追加到body中；
调用浏览器的打印预览；
预览界面关闭后，将待打印元素从body中移除，将原始页面恢复。

let printView = this.state.printRef //获取待打印元素
document.querySelector('#root').className = 'print-hide' //将根元素隐藏
document.body.appendChild(printView) //将待打印元素追加到body中
window.print() //调用浏览器的打印预览
document.body.removeChild(printView) //将待打印元素从body中移除
document.querySelector('#root').className = '' //将原始页面恢复

对应的CSS设置：

@page {
 size: A4;
 margin: 0;
}
@media print {
 html, body {
  min-width: 0;
  width: 210mm;
  height: 297mm;
 }
 .print-hide {
 visibility: hidden!important;
 display: none!important;
 }
}

其中，@page中的size可以自己设置纸张的大小，如果是A4纸可以直接设置值为A4，媒体查询@media print中设置的是打印时的样式，因为打印设备知道其输出区域的物理大小，所以使用厘米（cm）、毫米（mm）、英寸（in）等作为打印设计的单位完全可行。

补充（其他原生的打印方法）

直接替换body的内容为要打印的内容，之后再重新刷新页面。

const old = window.document.body.innerHTML //备份原来的页面
window.document.body.innerHTML = ''
window.document.body.appendChild(/* 将你要打印的内容附加到这 */)
window.print() //调用print()函数时，会跳出打印预览的界面，以下的代码被阻塞，关闭预览界面后继续执行
window.document.body.innerHTML = old
window.location.reload() //重新加载旧页面

打开一个新窗口，将打印内容放到新窗口打印，打印结束后关闭新窗口

const newWindow = window.open("打印窗口", "_blank")
const docStr = '<div>test</div>' //需要打印的内容
newWindow.document.write(docStr)
const styles = document.createElement("style")
styles.setAttribute('type', 'text/css') //media="print"
styles.innerHTML = ''
newWindow.document.getElementsByTagName('head')[0].appendChild(styles)
newWindow.print()
newWindow.close()

以上两种方法可能会造成CSS样式应用无效的问题。

3. 注意点

第二小节的步骤2中的意思是：将页面中所有不需要打印的元素隐藏，特别注意像模态窗Model这些元素，也要为它们加上 'print-hide'className属性。

如果需要在特定位置强制分页打印，可以尝试在对应元素上设置page-break-before：always !important、page-break-after：always !importantCSS属性，该属性只对块级元素有效。

进入打印预览后，我们无法获知用户最终是选择了打印，还是选择了取消。这里若有人知道解决方法的话，欢迎留言。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。

深入理解JavaScript的React框架的原理

如果你在两个月前问我对React的看法,我很可能这样说: 我的模板在哪里?javascript中的HTML在做些什么疯狂的事情?JSX开起来非常奇怪!快向它开火,消灭它吧! 那是因为我没有理解它. 我发誓,React 无疑是在正确的轨道上, 请听我道来. Good old MVC 在一个交互式应用程序一切罪恶的根源是管理状态. "传统"的方式是MVC架构,或者一些变体. MVC提出你的模型是检验真理的唯一来源 - 所有的状态住在那里. 视图是源自模型,并且必须保持同步. 当模式的转变,
十分钟带你快速了解React16新特性

前段时间React的16版本发布了,采用了MIT开源许可证,新增了一些新的特性. Error Boundary render方法新增返回类型 Portals 支持自定义DOM属性 setState传入null时不会再触发更新更好的服务器端渲染新的打包策略 ... 1. 使用Error Boundary处理错误组件之前,一旦某个组件发生错误,整个组件树将会从根节点被unmount下来.React 16修复了这一点,引入了Error Boundary的概念,中文译为"错误边界",当某
React.js入门学习第一篇

一.JSX介绍 ①定义 JSX=JavaScript XML,是一种在React组件内部构建标签的类XML语法.React在不使用JSX的情况下一样可以工作,但是使用JSX可以提高组件的可读性,增强JS语义,结构清晰,抽象程度高,代码模块化.因此推荐在React中使用JSX. ②特点 1.元素名首字母大写 2.符合嵌套规则 3.可以写入求值表达式 4.驼峰式命名 5.不能使用javascript原生函数的一些关键词,如for和class.需要替换成htmlFor和className ③使用方法
VSCode配置react开发环境的步骤

vscode 默认配置对于 react 的 JSX 语法不友好,体现在使用自动格式化或者粘贴后默认缩进错误,尽管可以通过改变 language mode 缓解错误,但更改 language mode 后的格式化依然不够理想. 通过搭配使用 ESLint和 Prettier插件可以实现在 vscode 中完美支持 JSX 语法. 编辑器安装插件在 vscode 中需要安装下面插件: ESLint Prettier 项目中的配置配置ESLint 基础配置项目中安装 babel-eslint ,
React如何实现浏览器打印部分内容详析

前言近期着手项目任务的打印功能,在此作个记录,本文介绍基于React的一种调用浏览器打印页面指定内容的方法. 整体思路: 通过构建一个隐藏的元素(该元素包裹需打印的内容),当打印行为触发时,将页面其他的一些不需要打印的元素隐藏,然后将需打印的元素追加到body中,打印完成后,再恢复初始状态即可.浏览器打印的本质还是将web页面中的元素打印出来而已. 1. 构建待打印元素在页面中构建一个display为none的元素,里面的内容为你需要打印的内容.我们还需要设置包裹打印内容的元素的ref属性,
React中阻止事件冒泡的问题详析

前言最近在研究react.redux等,网上找了很久都没有完整的答案,索性自己整理下,这篇文章就来给大家介绍了关于React阻止事件冒泡的相关内容,下面话不多说了,来一起看看详细的介绍吧在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理事件捕获与冒泡 DOM 事件会先后经历捕获与冒泡两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达触发事件的元素后,开始由下往上冒泡. IE9 及之前的版本只支持冒泡 | A --------------
java自定义异常打印内容详解

本文实例为大家分享了java自定义异常打印内容的具体代码,供大家参考,具体内容如下背景:在开发中,我们可能会使用到自定义异常,但是,这个自定义异常在打印日志时,往往打印的内容比较多. 1.自定义异常打印内容可以看到,虽然我们使用的是自定义异常,但是当抛出时,还是会打印出堆栈的全部信息. 2.查看源码通过查看源码,我们可以得知,当抛出异常时,程序会调用此异常的fillInStackTrace方法,但是,大部分异常都没有对该方法做处理.基本是调用super的方法. 可以看到,此方法的父类实现,
Electron整合React使用搭建开发环境的步骤详解

简介用于构建用户界面的 JavaScript 库步骤首先创建React npx create-react-app doc 进入到doc项目 cd doc 安装electron npm install electron --save-dev 安装依赖判断是否为生产环境 cnpm install electron-is-dev --save-dev 在项目根目录创建main.js const { app ,BrowserWindow } = require('electron') const
vue前端实现打印下载示例详解

目录 html2canvas介绍 jspdf介绍 printjs介绍 html2canvas介绍分享一下几个后台管理系统比较常用的插件:下载.打印 html2canvas是在浏览器上对网页进行截图操作,实际上是操作DOM,这个插件也有好长时间了,比较稳定,目前使用还没有遇到什么bug jspdf介绍如果下载出来是pdf文件,可以加上jspdf插件,会先通过html2canvas把页面转化成base64图片,再通过jspdf导出安装 npm i html2canvas jspdf 或 yar
React特征学习之Form格式示例详解

目录 Form 样式 React hook Form 样式首先来看一个简单Form, 式样如下 import * as React from 'react'; const LoginForm = () => { return ( <form> <div> // Notice: 这里要用htmlFor,相当于id <label htmlFor="email">Email</label> <input id="emai
React状态管理Redux的使用介绍详解

目录 1. 简介 2. 核心概念 3. redux工作流 4. 模拟redux工作流程 5. 使用redux 6. react-redux 1. 简介 Redux 是 JavaScript 应用的状态容器(对象),提供可预测的状态管理.可以让你开发出行为稳定可预测的应用,运行于不同的环境(客户端.服务器.原生应用),并且易于测试.Redux 除了和 React 一起用外,还支持其它界面库. 解决的问题:多层级组件间通信问题. 2. 核心概念单一数据源整个redux中的数据都是集中管理,存储于
React 模式之纯组件使用示例详解

目录什么是纯组件纯组件解决了什么问题怎么使用纯组件 CC: shouldComponentUpdate() 和 React.PureComponent FC: React.memo() 你可能并不需要纯组件什么是纯组件纯组件(Pure Component)这概念衍生自纯函数.纯函数指的是返回结果只依赖于传入的参数,且对函数作用域外没有副作用的函数.这种函数在相同参数下,返回结果是不变的.纯函数的返回值能被安全地缓存起来,在下次调用时,跳过函数执行,直接读取缓存.因为函数没有外部副作用,
React为什么需要Scheduler调度器原理详解

目录正文我们为什么需要Scheduler(调度器) Scheduler如何进行工作总结正文最近在重学React,由于近两年没使用React突然重学发现一些很有意思的概念,首先便是React的Scheduler(调度器) 由于我对React的概念还停留在React 15之前(就是那个没有hooks的年代),所以接触Scheduler(调度器) 让我感觉很有意思: 在我印象中React的架构分为两层(React 16 之前) Reconciler(协调器)—— 负责找出变化的组件 Rend
React之错误边界 Error Boundaries示例详解

目录引言注意实现错误边界应该放置在哪? 未捕获错误(Uncaught Errors)该如何处理? 注意:自 React 15 的命名更改引言过去,组件内的代码异常会导致 React 的内部状态被破坏,产生可能无法追踪的错误.但 React 并没有提供一种优雅处理这些错误的方式,也无法从错误中恢复. 默认情况下,若一个组件在渲染期间(render)发生错误,会导致整个组件树全部被卸载,这当然不是我们期望的结果. 部分组件的错误不应该导致整个应用崩溃.为了解决这个问题,React 16

React如何实现浏览器打印部分内容详析

相关推荐

随机推荐