在react中实现打印功能

jiezi

5 年前

我们知道，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?`	传递给打印窗口主体的类

在react中实现打印功能

一. 使用方法

二. 组件参数

<ReactToPrint />