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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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';
 
type Props = {
  result: GenerateResponse | ErrorResponse;
  recordType: Record | null;
};
 
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 ? (
        <ErrorResult result={props.result} />
      ) : (
        <>
          {props.recordType === 'Qr' ? (
            <>
              {/* Qr */}
              <div
                style={{
                  width: '100%',
                  maxWidth: '1200px',
                  height: '300px',
                  margin: '0 auto 0 auto',
                  padding: '0',
                  overflowX: 'scroll',
                  overflowY: 'scroll',
                  border: '1px solid black',
                }}
              >
                {/* PDFに変換する対象のエリア start */}
                <div
                  ref={contentRef}
                  style={{
                    aspectRatio: '210 / 297',
                    width: 'auto',
                    height: '1485px',
                    margin: '0 auto',
                    backgroundColor: '#FFFFFF',
                    border: '1px solid black',
                  }}
                >
                  <QrList visible_ids={props.result.visible_ids} />
                </div>
                {/* PDFに変換する対象のエリア end */}
              </div>
              <div style={{ width: '100%' }}>
                <button
                  onClick={handleDownloadPdf}
                  style={{
                    width: '200px',
                    height: '50px',
                    fontSize: '18px',
                    margin: '10px auto 0 auto',
                    display: 'block',
                  }}
                >
                  PDFをダウンロード
                </button>
              </div>
            </>
          ) : props.recordType === 'Barcode' ? (
            <>
              {/* Barcode */}
              <div
                style={{
                  width: '100%',
                  maxWidth: '1200px',
                  height: '300px',
                  margin: '0 auto 0 auto',
                  padding: '0',
                  overflowX: 'scroll',
                  overflowY: 'scroll',
                  border: '1px solid black',
                }}
              >
                {/* PDFに変換する対象のエリア start */}
                <div
                  ref={contentRef}
                  style={{
                    aspectRatio: '210 / 297',
                    width: 'auto',
                    height: '1485px',
                    margin: '0 auto',
                    backgroundColor: '#FFFFFF',
                    border: '1px solid black',
                  }}
                >
                  <BarcodeList visible_ids={props.result.visible_ids} />
                </div>
                {/* PDFに変換する対象のエリア end */}
              </div>
              <div style={{ width: '100%' }}>
                <button
                  onClick={handleDownloadPdf}
                  style={{
                    width: '200px',
                    height: '50px',
                    fontSize: '18px',
                    margin: '10px auto 0 auto',
                    display: 'block',
                  }}
                >
                  PDFをダウンロード
                </button>
              </div>
            </>
          ) : (
            // Nothing
            <h2>Generate Successed!</h2>
          )}
        </>
      )}
    </>
  );
};
 
export default GenerateResult;