티스토리 뷰

반응형

브라우저에서 버튼을 클릭할 때 파일을 다운로드하게 하는 방법입니다. 

<a href="https://cdn.tistory.com/abbo/12312313.zip" download>다운로드 zip</a>

Node 에서는 파일을 전송하기 위한 라우터가 필요한데, express를 설치합니다.

$ npm i express
const express = require('express')
const router = express.Router()
const fs = require('fs')

router.get('address', (req, res, next) => {
   const stream = fs.createReadStream('filepath')
   stream.pipe(res)
})

위의 코드와 같이 적용하면 파일이 다운로드 되지 않고, 요청에 대한 응답에 문자열이나 버퍼 형식으로 들어갑니다. 아래와 같이 수정을 하면 가능합니다.

const express = require('express')
const router = express.Router()
const fs = require('fs')

router.get('address', (req, res, next) => {
   const stream = fs.createReadStream('filepath')
   res.setHeader('Content-Disposition', `attachment; filename=${fileName}`)
   stream.pipe(res)
})

헤더에 Content-Disposition을 넣어주는 것을 빠트리면 안됩니다. 이 헤더를 브라우저가 읽고 다운로드라고 인식합니다. 헤더 값에는 저장되길 원하는 파일명을 적습니다. 이를 간소화하기 위해 Express Router 내에는 res.download와 같이 적용할 수도 있습니다. 

const express = require('express')
const router = express.Router()
const fs = require('fs')

router.get('address', (req, res, next) => {
   res.download('filePath', 'filename')
})

추가적으로 Content-Disposition 헤더는 FormData를 전송할 때도 자주 사용합니다. Content-Disposition: form-data; 로 Request Body에 들어가 있을 때도 있습니다.

반응형

'Server' 카테고리의 다른 글

Node js Redis 자료구조  (0) 2021.06.15
Node에 Redis 연결하기  (0) 2021.06.15
다른 도메인간 쿠키 전송하기  (0) 2021.06.14
Express cors 사용하기  (0) 2021.06.14
Express 3 에서 4로 업그레이드 하기  (0) 2021.06.14
Node Project Clone 시 주의할 점  (0) 2021.06.14
댓글
공지사항