react-to-print打印

前言

今天介绍一个平时开发比较实用的功能，那就是打印，以前默认的打印也不是很好用，现在有了封装好的一个打印工具 react-to-print，非常好用，可以将实现对指定的ui内容，可以说非常方便

react-to-print

第一步安装 react-to-print

yarn add react-to-print

使用如下所示

import ReactToPrint from "react-to-print";

//用其将我们关联我们的 打印内容、打印按钮
const componentRef = useRef(null);

return (
    <div>
        ...
        
        //这是我们的打印内容，一般使用弹窗、跳转页面形式显示，里面显示内容，底部或者顶部显示打印按钮
        <PrintView ref={componentRef} />
        
        //这就是我们的打印按钮，根据设置放置指定位置即可，一般放底部
        <ReactToPrint
            trigger={() => <a href="#">点此打印</a>}
            content={() => componentRef.current}
            //documentTitle="页眉标题"//标题，一般不用，默认页眉页脚内容不好改动，一般都去掉
        />
    </div>
);

打印内容一般自己写个小组件，也可以直接一个 div 解决

//有直接使用老式的 reactview的
export class PrintView extends React.PureComponent {
    render() {
        return (
            <div>
                My cool content here!
            </div>
        );
    }
}

//react我们更多地是使用 hook 的形式，如下所示
//这里的 ref 类型我们并不会用来限制其他代码，就是走个过场，any即可
export const ComponentToPrint = React.forwardRef((props, ref: any) => {
    return (
        <div ref={ref}>
            My cool content here!
        </div>
    )
}

//直接编写逻辑
//就一个小弹窗没啥太多内容，可以直接一个 div 解决，这样也可以，简单粗暴
<div ref={ref}>
    My cool content here!
</div>

css 设置 可以帮助我们更好的设置打印功能，能够帮助我们更好分页等

@media print {
  html, body {
    height: initial !important;
    overflow: initial !important;
    -webkit-print-color-adjust: exact;
  }
}

@page {
  size: auto;
  margin: 20mm; //设置我们打印内容的边距，根据自己需要调整，一般调整这个
}

点击打印按钮，我们看图，如下所示，页眉页脚多余可以去掉，可以根据调整内容，可以选择自己的打印机，也可以直接另存为

ps：看文档会发现还有 useReactToPrint 之类的，这个稳定版本并没有他案例的那些参数，暂不考虑哈

最后

如果还有更多需要，可以点到组件里面看看，里面也有 readme.md 文档可以观看哈