diff --git a/package.json b/package.json index 893165e..3ece408 100755 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "date-fns": "^2.28.0", "draft-js": "^0.11.7", "emoji-picker-react": "^3.5.1", + "file-saver": "^2.0.5", "formik": "^2.2.9", "framer-motion": "^4.1.13", "history": "^5.2.0", diff --git a/src/apis/OpstBizService.js b/src/apis/OpstBizService.js index 0775cef..1bdc414 100644 --- a/src/apis/OpstBizService.js +++ b/src/apis/OpstBizService.js @@ -12,13 +12,20 @@ import { GET_FILE_DOWNLOAD } from 'commons/ApiUrl'; import axios from 'utils/axios'; +import login from '../views/pages/authentication/authentication/Login'; +import { ACCESS_TOKEN_NAME } from '../commons/constants'; class OpstBizService { // eslint-disable-next-line no-return-await getComboCodeList = async (params) => await axios.get(GET_CMM_CODE_LIST, { params }); - // eslint-disable-next-line no-return-await - fileDownload = async (id) => await axios.get(GET_FILE_DOWNLOAD + id); + //TODO: 헤더에서 파일 정보 읽을 수 있도록 변경 필요 + fileDownload = (id) => + axios.get(GET_FILE_DOWNLOAD + id, { + responseType: 'blob' // 'arrayBuffer', + // withCredentials: process.env.NODE_ENV === 'development' + // headers: { Authorization: window.localStorage.getItem(ACCESS_TOKEN_NAME) } + }); setRowId = (params, idx) => { if (params && params.page && params.size) return params.page * params.size + idx + 1; diff --git a/src/utils/axios.js b/src/utils/axios.js index 62548db..b01c82a 100755 --- a/src/utils/axios.js +++ b/src/utils/axios.js @@ -7,7 +7,7 @@ import Swal from 'sweetalert2'; const axiosService = axios.create({ baseURL: process.env.NODE_ENV === 'development' ? process.env.REACT_APP_API_URL : '', - withCredentials: process.env.NODE_ENV === 'development', // 개발시만 사용 : crossdomain + withCredentials: true, // process.env.NODE_ENV === 'development', // 개발시만 사용 : crossdomain timeout: Number(process.env.REACT_APP_SERVER_TIMEOUT), headers: { 'Content-Type': 'application/json' diff --git a/src/views/biz/board/PublicBoardForm.jsx b/src/views/biz/board/PublicBoardForm.jsx index 50eed20..e0c6051 100644 --- a/src/views/biz/board/PublicBoardForm.jsx +++ b/src/views/biz/board/PublicBoardForm.jsx @@ -1,4 +1,4 @@ -import { useMemo, useRef, useState } from 'react'; +import { useEffect, useMemo, useRef, useState } from 'react'; // material-ui import { Button, Grid, IconButton, Input, InputAdornment, TextField, Tooltip } from '@mui/material'; @@ -16,6 +16,7 @@ import * as React from 'react'; import axios from 'axios'; import { FileDownload, FileUpload } from '@mui/icons-material'; +import FileSaver from 'file-saver'; const PublicBoardForm = (props) => { console.log(props); @@ -24,6 +25,7 @@ const PublicBoardForm = (props) => { const [contents, setContents] = useState(inContents); const [filesInfo, setFilesInfo] = useState(null); const [selectedFile, setSelectedFile] = useState(inFilename); // 파일 + const [fileData, setFileData] = useState(null); const onList = (e) => { setOpen(false); @@ -116,9 +118,49 @@ const PublicBoardForm = (props) => { setFilesInfo(e.target.files); }; - const handleFileDownload = (e) => { - opstBizService.fileDownload(inCode); - }; + const handleFileDownload = () => setFileData(opstBizService.fileDownload(inCode)); + + //TODO: 헤더에서 설정한 파일명을 직접 읽어 설정할 수 있도록 변경 필요 : 임시로 파일명 필드 이름을 사용하도록 하였음 + useEffect(() => { + if (fileData) { + // const contentDisposition = fileData.headers['Content-Disposition']; // 파일 이름 + // const fileName = 'unknown'; + // if (contentDisposition) { + // const [fileNameMatch] = contentDisposition.split(';').filter((str) => str.includes('filename')); + // if (fileNameMatch) [, fileName] = fileNameMatch.split('='); + // } + + // fileName = JSON.stringify(fileData.headers).split('filename=')[1].split('",')[0]; + FileSaver.saveAs(new Blob([fileData.data]), selectedFile); + } + /* + if (fileData) { + // const contentDisposition = fileData.headers['Content-Disposition']; // 파일 이름 + const fileName = 'unknown'; + // if (contentDisposition) { + // const [fileNameMatch] = contentDisposition.split(';').filter((str) => str.includes('filename')); + // if (fileNameMatch) [, fileName] = fileNameMatch.split('='); + // } + + // fileName = JSON.stringify(fileData.headers).split('filename=')[1].split('",')[0]; + + const url = window.URL.createObjectURL(new Blob([fileData.data])); + const link = document.createElement('a'); + link.href = url; + link.setAttribute('download', fileName); + link.style.cssText = 'display:none'; + link.setAttribute('id', 'tempLink'); + document.body.appendChild(link); + link.click(); + } + return () => { + const link = document.querySelector('#tempLink'); + // eslint-disable-next-line no-unused-expressions + link && link.remove(); + }; +*/ + }, [fileData]); + return ( <>