在react中实现打印功能

摘要：我们知道，window.print()可以调起打印功能，但是直接用window.print()如果直接打印的话，没有样式，而且默认打印的是整个网页的内容。解决的方法可以用iframe方式引入需要打印的区域，并把样式添加进去

我们知道，window.print()可以调起打印功能，但是直接用window.print()如果直接打印的话，没有样式，而且默认打印的是整个网页的内容。解决的方法可以用iframe方式引入需要打印的区域，并把样式添加进去，然后把iframe标签定位到看不到的地方去。搜了一下，已经有人造好了轮子，react-to-print插件就是这么做的。

一.使用方法

下载

npm install --save react-to-print

引用

import ReactToPrint from 'react-to-print';

调用

 //触发按钮
 <ReactToPrint
          trigger={() => <a href="#">点此打印</a>}
          content={() => this.componentRef}
        />
  //打印内容
  <div ref={el => (this.componentRef = el)}>
            ....内容
  <div/>

二.组件参数

<ReactToPrint />

该组件接受以下参数（注意：?表示可选参数）：

名称	类型	描述
trigger	function	返回React组件或HTML元素的函数
content	function	返回组件参考值的函数。然后将该参考值的内容用于打印
copyStyles	boolean?	将所有<style>和<link type="stylesheet" />标签从<head>父窗口内部复制到打印窗口。（默认值：true）
onBeforeGetContent	function?	在库收集页面内容之前触发的回调函数。返回void或Promise。可用于在打印之前更改页面上的内容。
onBeforePrint	function?	打印前触发的回调功能。返回void或Promise。注意：此功能在打印之前立即运行，但在收集页面内容之后才运行。要在打印之前修改内容，请onBeforeGetContent改用。
onAfterPrint	function?	打印后触发的回调功能
onPrintError	function(errorLocation: string, error: Error)?	如果打印错误严重到无法继续打印，将调用的回调函数。目前仅限于onBeforeGetContent或中的Promise拒绝onBeforePrint。使用它尝试再次打印。errorLocation会告诉您Promise在哪个回调中被拒绝。
removeAfterPrint	boolean?	执行操作后，卸下打印iframe。默认为false。
pageStyle	string?	覆盖默认的打印窗口样式
bodyClass	string?	传递给打印窗口主体的类

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_5918