Browse Source

laanc 공문 다운로드, 미리보기 작업

pull/2/head
김장현 12 months ago
parent
commit
7520a6a2ba
  1. 43
      package-lock.json
  2. 1
      package.json
  3. 7
      src/assets/css/custom.css
  4. 2
      src/modules/laanc/sagas/laancSagas.ts
  5. 82
      src/views/laanc/LaacnStep3.js

43
package-lock.json generated

@ -13170,6 +13170,11 @@
"sourcemap-codec": "^1.4.4"
}
},
"make-cancellable-promise": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/make-cancellable-promise/-/make-cancellable-promise-1.3.1.tgz",
"integrity": "sha512-DWOzWdO3xhY5ESjVR+wVFy03rpt0ZccS4bunccNwngoX6rllKlMZm6S9ZnJ5nMuDDweqDMjtaO0g6tZeh+cCUA=="
},
"make-dir": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
@ -13186,6 +13191,11 @@
}
}
},
"make-event-props": {
"version": "1.6.1",
"resolved": "https://registry.npmjs.org/make-event-props/-/make-event-props-1.6.1.tgz",
"integrity": "sha512-JhvWq/iz1BvlmnPvLJjXv+xnMPJZuychrDC68V+yCGQJn5chcA8rLGKo5EP1XwIKVrigSXKLmbeXAGkf36wdCQ=="
},
"makeerror": {
"version": "1.0.11",
"resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.11.tgz",
@ -13399,11 +13409,24 @@
}
}
},
"merge-class-names": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/merge-class-names/-/merge-class-names-1.4.2.tgz",
"integrity": "sha512-bOl98VzwCGi25Gcn3xKxnR5p/WrhWFQB59MS/aGENcmUc6iSm96yrFDF0XSNurX9qN4LbJm0R9kfvsQ17i8zCw=="
},
"merge-descriptors": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
"integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
},
"merge-refs": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/merge-refs/-/merge-refs-1.2.1.tgz",
"integrity": "sha512-pRPz39HQz2xzHdXAGvtJ9S8aEpNgpUjzb5yPC3ytozodmsHg+9nqgRs7/YOmn9fM/TLzntAC8AdGTidKxOq9TQ==",
"requires": {
"@types/react": "*"
}
},
"merge-stream": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@ -14590,6 +14613,11 @@
"sha.js": "^2.4.8"
}
},
"pdfjs-dist": {
"version": "2.6.347",
"resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.6.347.tgz",
"integrity": "sha512-QC+h7hG2su9v/nU1wEI3SnpPIrqJODL7GTDFvR74ANKGq1AFJW16PH8VWnhpiTi9YcLSFV9xLeWSgq+ckHLdVQ=="
},
"perfect-scrollbar": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.5.1.tgz",
@ -21410,6 +21438,21 @@
"prop-types": "^15.6.1"
}
},
"react-pdf": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-5.3.2.tgz",
"integrity": "sha512-gT2xeUAUJem5UWNZYIQSPJAlPDbc3mIIhEgGK8P/qo1B68WIE4R4v3tNFYM9e5nqlKnGZG4Cd68SetlmnPejwA==",
"requires": {
"@babel/runtime": "^7.0.0",
"file-loader": "^6.0.0",
"make-cancellable-promise": "^1.0.0",
"make-event-props": "^1.1.0",
"merge-class-names": "^1.1.1",
"merge-refs": "^1.0.0",
"pdfjs-dist": "2.6.347",
"prop-types": "^15.6.2"
}
},
"react-perfect-scrollbar": {
"version": "1.5.5",
"resolved": "https://registry.npmjs.org/react-perfect-scrollbar/-/react-perfect-scrollbar-1.5.5.tgz",

1
package.json

@ -87,6 +87,7 @@
"react-leaflet": "3.1.0",
"react-mapbox-gl": "^5.1.1",
"react-paginate": "7.0.0",
"react-pdf": "5.3.2",
"react-perfect-scrollbar": "1.5.5",
"react-player": "2.6.2",
"react-rating": "2.0.5",

7
src/assets/css/custom.css

@ -1011,4 +1011,9 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;}
.report-link{margin-bottom:1rem}
.report-link a{font-size:1rem;display:inline-flex;justify-content: center;align-items: center;}
.report-link a svg{margin-left:4px;width:18px;}
.report-link a + a{margin-left:1rem}
.report-link a + a{margin-left:1rem}
/* .react-pdf__Page__canvas {
margin: 0 auto;
width: 100% !important;
height: 100% !important;
} */

2
src/modules/laanc/sagas/laancSagas.ts

@ -51,7 +51,7 @@ function* postCreatesata(
const res = yield call(Apis.laancApi.postCreate, detail);
// const { data } = res;
localStorage.setItem('pdfUrl', res.data.pdfUrl);
// yield put(
// MessageActions.IS_MESSAGE({
// messageCode: SAVE_MESSAGE.code,

82
src/views/laanc/LaacnStep3.js

@ -1,6 +1,8 @@
import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';
import { Document, Page, pdfjs } from 'react-pdf';
import moment from 'moment';
import {
Row,
Col,
@ -19,6 +21,9 @@ import { useHistory } from 'react-router-dom';
import FlightArea from './FlightArea';
import LaancPdf from './LaancPdf';
import { AlertCircle, CheckCircle, Download } from 'react-feather';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
export default function LaacnStep3({
handlerStep,
disabledAnimation,
@ -44,12 +49,32 @@ export default function LaacnStep3({
};
const [centeredModal2, setCenteredModal2] = useState(false);
const [formModal, setFormModal] = useState(false);
const [numPages, setNumPages] = useState(null); // total
const [pageNum, setPageNum] = useState(1);
const { user } = useSelector(state => state.authState);
const handlerClose = () => {
setFormModal(!formModal);
};
const handlerPdfDownload = e => {
const url = localStorage.getItem('pdfUrl');
if (url !== 'undefined') {
console.log('@?@?@?@?');
let alink = document.createElement('a');
alink.href = `http://211.253.11.189:8080${localStorage.getItem(
'pdfUrl'
)}`;
alink.download = 'SamplePDF.pdf';
alink.click();
}
};
const onDocumentLoadSuccess = ({ numPages: nextNumPages }) => {
setNumPages(nextNumPages);
};
return (
<>
<ModalHeader>
@ -213,24 +238,22 @@ export default function LaacnStep3({
<div className='ti'>승인 공문</div>
<Row>
<Col md='6'>
{/* <button color='primary' size='lg' onClick={handlerPdfDownload}>
<Button color='primary' size='lg' onClick={handlerPdfDownload}>
공문 다운로드
</button> */}
<a
href={
'http://211.253.11.189:8080/api/comn/file/download?fileSno=118'
}
download
>
공문 다운로드
</a>
</Button>
</Col>
<Col md='6'>
<Button
color='primary'
size='lg'
outline
onClick={() => setFormModal(true)}
onClick={() => {
const url = localStorage.getItem('pdfUrl');
if (url !== 'undefined') {
setFormModal(true);
}
}}
>
공문 미리보기
</Button>
@ -293,9 +316,42 @@ export default function LaacnStep3({
toggle={handlerClose}
className='modal-dialog-centered'
>
<ModalHeader toggle={handlerClose}>pdf 미리보기</ModalHeader>
<ModalHeader toggle={handlerClose}>공문 미리보기</ModalHeader>
<ModalBody>
<LaancPdf />
{/* <LaancPdf /> */}
<Document
file={`http://211.253.11.189:8080${localStorage.getItem('pdfUrl')}`}
onLoadSuccess={onDocumentLoadSuccess}
>
{/* {Array.from(new Array(numPages), (el, index) => (
<Page key={`page_${index + 1}`} pageNumber={index + 1} />
))} */}
<Page pageNumber={pageNum} />
</Document>
<div
style={{
display: 'flex',
justifyContent: 'space-around',
alignItems: 'center'
}}
>
<Button
onClick={() => (pageNum > 1 ? setPageNum(pageNum - 1) : null)}
>
&lt;
</Button>
<span>
{pageNum} / {numPages}
</span>
<Button
onClick={() =>
pageNum < numPages ? setPageNum(pageNum + 1) : null
}
>
&gt;
</Button>
</div>
</ModalBody>
<ModalFooter>
<Button color='primary' onClick={handlerClose}>

Loading…
Cancel
Save