Django3.2 | 29 | QRオーダーシステムの構築 | QRコードプリント - 学生向けプログラミング入門

[28 | QRコード表示]　<<　[ホーム]　>>　[30 | メニューページ]

「react-to-print」をインストールします。

コマンド
npm i react-to-print@2.12.4 -s

「src/components」フォルダに「QRCode.js」ファイルを新規作成します。

新規作成　【QRMenu/qrmenu_react/src/components/QRCode.js】

import { AiOutlineLink } from 'react-icons/ai';
import { Button } from 'react-bootstrap';
import QRCodeReact from 'qrcode.react';
import React, { useRef } from 'react';
import styled from 'styled-components';
import { useReactToPrint } from 'react-to-print';

const Container = styled.div`
 position: relative;
`;

const Overlay = styled.div`
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    background-color: rgba(255, 255, 255, 0.5);
 > div {
    margin: auto;
 }
`;

const ComponentToPrint = styled.div`

    margin-top: 200px;
    h1 {
        font-size: 80px;
        font-weight: bold;
        margin-bottom: 50px;
        text-align: center;
    }
    h2 {
        font-size: 40px;
        margin-bottom: 100px;
        text-align: center;
    }
    span {
        margin-left: 15rem;
    }
`;

const QRCode = ({ table, placeId }) => {
    const componentRef = useRef();
    const handlePrint = useReactToPrint({
      content: () => componentRef.current,
    });

    const url = `${window.location.origin}/menu/${placeId}/${table}`;

    return (
        <Container>
            <QRCodeReact value={url} size={200} />
            <Overlay>
                <div className="d-flex">
                    <Button variant="standard" onClick={handlePrint} className="mr-2">
                       <span Style="white-space: nowrap; font-size: 0.3rem;">{`客席 #${table} プリント`}</span>
                    </Button>
                    <Button variant="standard" href={`/menu/${placeId}/${table}`} target="_blank">
                        <AiOutlineLink size={25} />
                    </Button>
                </div>
            </Overlay>

            <div style={{ display: "none" }}>
                <ComponentToPrint ref={componentRef}>
                    <h1>客席 #{table}</h1>
                    <h2>スキャンして注文できます。</h2>
                    <span><QRCodeReact value={url} size={500} /></span>
                </ComponentToPrint>
            </div>
        </Container>

      );    
}

export default QRCode;

「src/components/QRCodeModal.js」ファイルの記述を変更します。

記述変更　【QRMenu/qrmenu_react/src/components/QRCodeModal.js】

import React from 'react';
import { Modal, Container, Row, Col, Button } from 'react-bootstrap';
import { AiFillPlusCircle, AiFillMinusCircle } from 'react-icons/ai';
import QRCode from './QRCode';
import styled from 'styled-components';

const OperationButton = styled(Button)`
    width: 30px;
    height: 30px;
    margin: 0 10px;
    font-size: 20px;
    line-height: 18px;
`;

const QRCodeModal = ({ show, onHide, place, onUpdatePlace }) => (
    <Modal show={show} onHide={onHide} size="lg" centered>
        <Modal.Body className="text-center pt-4">
            <Container>
                <h3>客席　QRコード</h3>
                <div className="s-flex align-items-center mt-4 mb-4">
                    <h5 className="mb-0 mr-2">
                        全席数： <b>{place.number_of_tables}</b>
                    </h5>

                    <OperationButton 
                        variant="lightgray"
                        size="sm"
                        onClick={() => onUpdatePlace(place.number_of_tables -1)}
                    >
                        <AiFillMinusCircle size={25} color="red" />
                    </OperationButton>
                    <OperationButton 
                        variant="lightgray"
                        size="sm"
                        onClick={() => onUpdatePlace(place.number_of_tables +1)}
                    >
                        <AiFillPlusCircle size={25} color="blue" />
                    </OperationButton>
                </div>
                <Row>
                    {Array.from({ length: place.number_of_tables }, (_, i) => i + 1).map(
                        (table) => (
                            <Col key={table} lg={4} md={6} className="mb-4">
                                <QRCode table={table} placeId={place.id} />
                            </Col>
                        )    
                    )}
                </Row>
            </Container>
        </Modal.Body>
    </Modal>
)

export default QRCodeModal;