[Node.js + Vue] 브라우저에서 서버에 있는 파일 다운로드하기

Node.js와 Vue (물론 기본적인 html도 가능합니다) 를 이용하여 서버단에 있는 파일을 다운로드하는 코드샘플입니다.

 

기본적인 express 서버를 띄우는 설정이나 실행환경 셋팅은 제외하였습니다.

 

[router.js]

const util = require('./util.js')
 
router.get('/download',(req, res, next)=>{
    util.download(req, res)
})

일단 기본적인 라우터 셋팅입니다. 단순하게 /download 라는 라우터로 진입했을 때 util.js 파일에 있는 download 함수를 실행시켜주는 코드입니다. 

 

[util.js]

exports.download = (req, res) => {
    const date = new Date()
    res.setHeader("Content-disposition", "attachment; filename="+ date.yyyymmddhhmmss() +'.csv');
    res.set('Content-Type', 'text/csv');
    fs.createReadStream(`./data.csv`)
    .pipe(res)
    .on('finish', ()=>{
        console.log('download complete')
    })
})
 

header를 정의해주는 부분을 먼저 작성합니다. 파일 타입과 파일 저장시에 파일명을 시스템 시간으로 정의하였습니다.

그리고 CreateReadStream을 이용하여 서버에 있는 특정 파일을 다운로드 할 수 있게끔 파일명을 넣어줍니다.

마지막으로 pipe 메서드를 통해서 해당 스트림을 response로 전송합니다.

 

백엔드쪽 작업은 끝났습니다. 이제 간단하게 프론트단에서 버튼과 해당 API를 호출하는 코드를 작성합니다.

 

[index.vue]

<template>
    <div>
        <button @click="download">CSV 다운로드</button>
    </div>
</template>
 
<script>
export default {
    name: 'download',
    data() {
        return {
        }
    },
    methods: {
        download() {
            try {
                let element = document.createElement('a');
                element.setAttribute('href','/download');
                element.click();
            } catch(error) {
                console.log(error)
            }
        }
    },
}
</script>

Vue.js 코드이긴하지만, HTML의 아주 단순한 코드를 옮긴 코드입니다. 화면에 버튼이 있고, 해당 버튼을 누를 때 발생하는 이벤트 함수를 작성한 코드입니다. download 함수에는 단순하게 download 라우터를 호출하는 코드가 전부입니다.

 

물론 axios나 form tag 같이 라우터를 호출하는 다른 방식으로 해도 괜찮습니다.

 

기존 소스에서 해당 기능만 발췌하여 작성하였습니다. 해당 방식으로 구현한 모습은 아래와 같습니다.

파일 다운로드 페이지

서버에 있는 파일을 클라이언트의 PC에서 다운로드 받을 수 있게 되었습니다. 파일명은 위 서버 코드에서 작성했다시피 시스템 시간의 시분초의 파일명으로 기본셋팅되었습니다.