react-to-print插件封装及打印注意事项

简单封装一下这个插件:

import React, { useState } from 'react';
import ReactToPrint from 'react-to-print';
import { CustomButton } from '../CustomButton/CustomButton';
import { useEffect } from 'react';
import { isEmpty } from 'lodash';

export const withoutTabStyle = { paddingTop: '10px', paddingBottom: '40px' };
interface ICustomReactToPrint {
    printShow: boolean;
    myRef: any;
    onBeforePrintGetContent?: () => void;
    onAfterPrintFinish?: () => void;
    containerStyle?: React.CSSProperties;
    containerStyle2?: React.CSSProperties;
    triggerPrintFlag?: number;
    privatePrintBtnClick?: () => void;
    buttonName?: string;
    buttonType?:string;
}
export const CustomReactToPrint = (props: ICustomReactToPrint) => {
    const {
        onBeforePrintGetContent,
        onAfterPrintFinish,
        privatePrintBtnClick,
        myRef,
        buttonName='打印',
        printShow = true,
        containerStyle,
        containerStyle2,
        triggerPrintFlag = 0, // 是否手动触发点击事件(打印按钮不使用CustomReactToPrint插件时使用)
        buttonType='link'
    } = props;
    const [isShow, setIsShow] = useState<boolean>(true);
    const [CustomReactToPrintRef, setCustomReactToPrintRef] = useState<any>(null);
    // 手动触发CustomReactToPrint插件的打印
    const onPrintClick = () => {
        CustomReactToPrintRef.handleClick();
    }
    useEffect(() => {
        setTimeout(() => {  triggerPrintFlag && !isEmpty(CustomReactToPrintRef) && onPrintClick(); }, 20);
    }, [triggerPrintFlag, CustomReactToPrintRef])
    useEffect(() => {  setIsShow(printShow); }, [printShow])
    return (
        <>
            <div style={{ visibility: privatePrintBtnClick ? undefined : 'hidden', ...containerStyle }}>
                {isShow && <CustomButton type={buttonType} onClick={privatePrintBtnClick}>{isShow&&buttonName}</CustomButton>}
            </div>
            <div style={{ 
                visibility: (isShow && !privatePrintBtnClick)  ? undefined: 'hidden', ...containerStyle2}}>
                <ReactToPrint
                    ref={ref => setCustomReactToPrintRef(ref)}
                    trigger={() => {
                        return <CustomButton type={buttonType} onClick={() => { }}>{isShow?buttonName:''}</CustomButton>
                    }}
                    content={() => myRef}
                    onBeforeGetContent={() => {
                        setIsShow(false);
                        // 打印前隐藏打印按钮
                        onBeforePrintGetContent && onBeforePrintGetContent();
                    }}
                    onAfterPrint={() => {
                        setIsShow(true);
                        onAfterPrintFinish && onAfterPrintFinish();
                    }}
                    removeAfterPrint={true}
                />
            </div>
        </>
    );
};

打印功能弹窗=>

const renderBtn = () => {
 return [
    <CustomReactToPrint
          containerStyle2={printBtnStyle}
          buttonName="打印正本"
          buttonType="primary"
          privatePrintBtnClick={() => {
            let num: number = triggerFlag + 1;
            if (num > 2) {
              num = 1;
            }
            setTriggerFlag(num);
          }}
          onBeforePrintGetContent={() => {
            setType('printOriginal');
          }}
          onAfterPrintFinish={() => {
            setType('onlyPrint');
          }}
          printShow={true}
          myRef={myRef}
          triggerPrintFlag={triggerFlag}
        />,
        <CustomReactToPrint
          containerStyle2={printBtnStyle}
          buttonName="打印副本"
          buttonType="primary"
          privatePrintBtnClick={() => {
            let num: number = triggerFlag2 + 1;
            if (num > 2) {
              num = 1;
            }
            setTriggerFlag2(num);
          }}
          onBeforePrintGetContent={() => {
            setType('printCopy');
          }}
          onAfterPrintFinish={() => {
            setType('onlyPrint');
          }}
          printShow={true}
          myRef={myRef}
          triggerPrintFlag={triggerFlag2}
        />
    ];
}

<Modal
      title="打印功能"
      visible={visible}
      mask={true}
      onCancel={hideModal}
      maskClosable={false}
      footer={renderBtn()}
      centered={true}
      width={1000}
    >
        <div className={styles.content} ref={ref => setMyRef(ref)}>
          <Module  />
        </div>
    </Modal>

1.打印文件Module.tsx对应的样式文件Module.module.css
.moduleContent{
  width: 825px;
  min-height: 1160px;
  margin: 0px auto 50px auto;
  border-radius: 5px;
  /* border: solid 1px #ccc; */
  padding: 50px 25px 25px 25px; 
  background-color: #fff;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-all;
  box-sizing: content-box;
}
其他略。。。

注意box-sizing: content-box;不能是border-box, 可以将boder取消注释查看差异

2.Module.tsx的标签内容
<div>
        <div className={styles.moduleContent}>1111。。。内容写多点才能测试出效果</div>
      {/**pageBreakAfter: 'always'=>为了第一个xx打印内容在打印弹窗出现后改变边距， 第二个xx打印内容别受影响 */}
      <p style={{ pageBreakAfter: 'always' }}></p >
      <div className={styles.moduleContent}>2222。。。内容写多点才能测试出效果</div>
    </div>