前言

大家可能在react应用中实现打印功能时，可能会遇到打印出来的样式出现问题，调用完打印接口后也会出现页面样式紊乱的问题以及注册绑定的事件失效等问题，这里我介绍一种第三方库react-to-print，通过这个库实现在当前页面的打印和打印服务端传递过来的html文档这两种打印场景。

window.print()踩的坑

window.print这种方法是最原生的方法，但是鉴于react是个单页应用，在打印完毕之后，会出现dom节点绑定的事件会被注销，以及页面会空白。
读者可以自行将window.location.reload()注销掉，在调用打印方法之后，你会发现printtest失效。
通过这种办法可以实现局部打印，你只需要把print绑定到你要打印的dom节点上即可。


function App() {const printf = () => {const old = window.document.body.innerHTML;const printPart = document.querySelector('.print');window.document.body.innerHTML = '';window.document.body.appendChild(printPart);window.print();window.document.body.innerHTML = old;window.location.reload();//注意打印完毕之后主动刷新，否则系统数据页面还有注册的事件将无用};const printtest = () => {console.log('1234');}return (<div className="print"><header>这是头部信息</header><button onClick={printtest}>事件测试</button><button onClick={printf}>window.print打印</button></div>);
}export default App;

第三方库react-to-print介绍

使用这种库的好处是对外暴露了很友好的接口，不需要自己实现，而且也可以设置打印样式，打印完成之后页面样式不会乱，注册绑定的事件也不会失效，具体详情请参阅他的官方文档

打印当前页面

import React, { useRef } from 'react';
import { useReactToPrint } from 'react-to-print';const App = () => {const printRef = useRef(null);const handlePrint = useReactToPrint({content: () => printRef.current,});const printtest = () => {console.log('1234');}return (<div ref={printRef}><header>这是头部信息</header><button onClick={printtest}>事件测试</button><button onClick={handlePrint}>window.print打印</button></div>);
}
export default App;

打印服务端传过来的html文档

印文打印内容一开始不知道，所以你需要给打印文档一个父节点，给父节点设置display:none,这样页面就不会展示它，而且react-to-print组件也可以copy到打印文档里的内容

import React, { useRef,useEffect } from 'react';
import { useReactToPrint } from 'react-to-print';
const App = () => {useEffect(() => {const res = getServerDocument({});//这里具体是你要请求打印文档的地址document.getElementById('print_box')!.innerHTML = res;}, [])const printRef = useRef(null);const handlePrint = useReactToPrint({content: () => printRef.current,});return (<div><div style={{ display: "none" }} ><div id='print_box' ref={printRef}></div></div><button onClick={handlePrint}>window.print打印</button></div>);
}
export default App;

戳这里进入react-to-print官方文档

记得三连

在react框架中实现打印过程中踩的坑相关推荐

关于打印过程中强制移除打印机的处理
在打印过程中,强制拔除打印机会出现如下状况: Hpijs会输出这个信息:unable to send DeviceStatus: Bad file descriptor: hplip_api.c 64 ...
python中读取文件过程中seek()函数的使用
python中读取文件过程中seek()函数的使用目录概述: 语法: 参数: 返回值: 实例: 概述: seek() 方法用于移动文件读取指针到指定位置. 语法: seek() 方法语法如下: 文 ...
SAP中物料质检过程中检验批/物料凭证/过账变更通知之间的业务关联图
截图中通过三个SAP事务窗口展示了SAP中物料质检过程中检验批/物料凭证/过账变更通知之间的业务关联,分别从左到右是WM中的LU04过账变更通知,MM中的MB51物料由质检库存变成非限制库存产生的物料 ...
python输出列表元素_在Python中分别打印列表中的每一个元素方法
在Python中分别打印列表中的每一个元素方法更新时间:2018年11月07日 15:12:03 作者:wintersshi 今天小编就为大家分享一篇在Python中分别打印列表中的每一个元素方法, ...
关于vue框架下载步骤以及过程中可能遇到的问题汇总
1.下载各个版本的vue框架链接介绍 | vue-element-admin 2.下载方法 1.去git网站下载git,如果git已经下载并安装好,该步可以省略 2.去nodejs网站下载node ...
C++中stl使用过程中的一些tips
该博文整理一些在使用stl编程过程中遇到的小经验: 1.在多线程环境下面打印调试,如何使用cout及时刷新到屏幕上? 在C中我们经常这样使用: printf("Hello World\n&q ...
java中子类实例化过程中的内存分配
知识点: 子类继承父类之后,实例化子类时,内存中子类是如何分配内存的呢? 下面,自己会结合一个例子,解释一下,一个子类实例化过程中,内存是如何分配的参考博客:http://www.cnblogs.c ...
spring中容器启动过程中初始化资源使用方法
一.定义在业务场景中,有时需要我们在容器启动过程中加载资源,完成数据的初始化或者配置,需要在调用前加载进spring容器过程中去,有以下一些方法来实现 1.定义静态常量,随着类的生命周期加载而提前加 ...
C#中UDP通信过程中出现:远程主机强迫关闭了一个现有的连接0x80004005】的解决方法
在UDP通信过程中, 使用try...catch语句接受数据时,总是会出现一个错误: System.Net.Sockets.SocketException (0x80004005): 远程主机强迫关闭 ...

在react框架中实现打印过程中踩的坑

文章目录

前言

window.print()踩的坑

第三方库react-to-print介绍

打印当前页面

打印服务端传过来的html文档

在react框架中实现打印过程中踩的坑相关推荐

最新文章

热门文章