前端hook项目pc总结笔记-打印实现局部打印

外层直接包裹一个div 绑定id

<div id='geyao'>

            <Card style={{ marginTop: "24px" }}>
                <Row>
                    <Col span={12}>款式号:{menu?.po}</Col>
                    <Col span={12}>床次:{menu?.bed_code}</Col>
                    <Col span={12}>日期:{menu?.register_date}</Col>
                </Row>
                <Row>
                    <Col span={12}>物料名称:{menu?.materiel_name}</Col>
                    <Col span={12}>唛架比:{menu?.size_ratio}</Col>
                    {/* <Col span={12}>幅宽:{menu?.width}</Col> */}
                    <Col span={12}>马克长:{menu?.mark}</Col>
                </Row>
              
                <Table dataSource={menuData.list} columns={columns}
 pagination={false} />
             
                {/* <BasicTable rowKey="id" loading={loading}  
data={menuData} resetProps={{pagination:false}} >
                <Table.Column<Menu> title="编号" dataIndex="id" 
align="center"></Table.Column>
                <Table.Column<Menu> title="颜色" dataIndex="color_name" 
align="center"></Table.Column>
                <Table.Column<Menu> title="缸号" dataIndex="batch_code" 
align="center"></Table.Column>
                <Table.Column<Menu> title="布长" dataIndex="total"
 align="center"></Table.Column>
                <Table.Column<Menu> title="铺布层数" dataIndex="layer" 
align="center"></Table.Column>
                <Table.Column<Menu> title="余布" dataIndex="residue" 
align="center"></Table.Column>
                <Table.Column<Menu> title="次布" dataIndex="deformity"
 align="center"></Table.Column>
                <Table.Column<Menu> title="短米" dataIndex="lack"
 align="center"></Table.Column>
            </BasicTable> */}
            </Card>
            </div>

const onOk = useCallback(() => {
        window.document.body.innerHTML = window.document.getElementById('geyao')!.
innerHTML;
        window.print();
        window.location.reload();
        // props.onConfirm()
        // window.print()
    }, []);