All files / src/components/generate GenerateResult.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { FC, useRef } from 'react';
import { ErrorResponse } from '../../models/errorResponse';
import ErrorResult from '../error/ErrorResult';
import { GenerateResponse } from '../../models/generateResponse';
import { Record } from '../../models/generateRequest';
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
import QrList from './qr/QrList';
import BarcodeList from './barcode/BarcodeList';
import styled from 'styled-components';
import NothingList from './nothing/NothingList';
 
type Props = {
  result: GenerateResponse | ErrorResponse;
  recordType: Record | null;
};
 
const StyledResultArea = styled.div`
  width: 100%;
  max-width: 1200px;
  height: 300px;
  margin: 0 auto 0 auto;
  padding: 0;
  overflow-x: scroll;
  overflow-y: scroll;
  border: 1px solid black;
`;
 
const StyledConvertPDFArea = styled.div`
  aspect-ratio: 210 / 297;
  width: auto;
  height: 1485px;
  margin: 0 auto;
  background-color: #ffffff;
  border: 1px solid black;
`;
 
const StyledDownloadPDFButton = styled.button`
  width: 200px;
  height: 50px;
  font-size: 18px;
  margin: 10px auto 0 auto;
  display: block;
`;
 
const StyledErrorResultWrapper = styled.div`
  margin-top: 53px;
`
 
const GenerateResult: FC<Props> = (props) => {
  // PDFに変換する対象のエリア
  const contentRef = useRef<HTMLDivElement>(null);
  // download処理
  const handleDownloadPdf = async () => {
    if (!contentRef.current) return;
 
    try {
      // 1️: 指定した要素をキャプチャしてCanvasに変換
      const canvas: HTMLCanvasElement = await html2canvas(contentRef.current);
 
      // 2: jsPDF インスタンスを作成（A4縦向き）
      const pdf: jsPDF = new jsPDF({
        orientation: 'p',
        unit: 'mm',
        format: 'a4',
      });
 
      // 3: PDFの幅を取得し、アスペクト比を維持した高さを計算
      const pdfWidth: number = pdf.internal.pageSize.getWidth();
      const pdfHeight: number = (canvas.height * pdfWidth) / canvas.width;
 
      // 4: canvasをPDFに追加（左上から配置）
      pdf.addImage({
        imageData: canvas,
        x: 0,
        y: 0,
        width: pdfWidth,
        height: pdfHeight,
      });
 
      // 5: PDFをダウンロード
      pdf.save('dashi-record.pdf');
    } catch (e) {
      console.error(e);
    }
  };
  return (
    <>
      {'code' in props.result && 'message' in props.result ? (
        <StyledErrorResultWrapper>
          <ErrorResult result={props.result} />
        </StyledErrorResultWrapper>
      ) : (
        <>
          {props.recordType === 'Qr' ? (
            <>
              {/* Qr */}
              <StyledResultArea>
                {/* PDFに変換する対象のエリア start */}
                <StyledConvertPDFArea ref={contentRef}>
                  <QrList visible_ids={props.result.visible_ids} />
                </StyledConvertPDFArea>
                {/* PDFに変換する対象のエリア end */}
              </StyledResultArea>
              <div style={{ width: '100%' }}>
                <StyledDownloadPDFButton onClick={handleDownloadPdf}>PDFをダウンロード</StyledDownloadPDFButton>
              </div>
            </>
          ) : props.recordType === 'Barcode' ? (
            <>
              {/* Barcode */}
              <StyledResultArea>
                {/* PDFに変換する対象のエリア start */}
                <StyledConvertPDFArea ref={contentRef}>
                  <BarcodeList visible_ids={props.result.visible_ids} />
                </StyledConvertPDFArea>
                {/* PDFに変換する対象のエリア end */}
              </StyledResultArea>
              <div style={{ width: '100%' }}>
                <StyledDownloadPDFButton onClick={handleDownloadPdf}>PDFをダウンロード</StyledDownloadPDFButton>
              </div>
            </>
          ) : (
            // Nothing
            <NothingList visible_ids={props.result.visible_ids} />
          )}
        </>
      )}
    </>
  );
};
 
export default GenerateResult;