제2회 - Web API 와 Web UI 로 파일 다운로드 (Web UI 편)

소개

마지막으로 파일을 다운로드하는 간단한 웹 API 및 웹 UI 샘플을 소개합니다.
첫 번째 의 전회는 Node.js + Express.js 에서의 Web API 를 소개했습니다.
두 번째 이번에는 Vue.js + Vuetify 으로 간단한 웹 UI를 만들고 이전 웹 API를 두드려 실제로 파일을 다운로드합니다.

웹 API

Web UI 편 (← 이마 코코)

환경

OS: macOS Mojave 10.14.6
Vue.js: 2.6.10
Vuetify: 2.1.0
axios : 0.19.0
file-saver : 2.0.2

Download.vue

Download.vue

<template>
    <v-container>
        <v-row>
            <v-col cols="2">
                <v-btn
                    v-on:click="click('sample.csv')"
                    color="primary"
                    block
                >
                    Download csv
                </v-btn>
            </v-col>

            <v-col cols="2">
                <v-btn
                    v-on:click="click('sample.png')"
                    color="primary"
                    block
                >
                    Download image
                </v-btn>
            </v-col>
        </v-row>
    </v-container>
</template>

<script>
import axios from 'axios'
import urljoin from 'url-join'
import { saveAs } from 'file-saver'

export default {
    methods: {
        async click (fileName) {
            const response = await axios.get(urljoin('http://localhost:3000/api/download'), {
                responseType: 'blob',
                params: {
                    'file': fileName
                }
            }).catch((error) => {
                console.log(error)
            })

            if (response && (200 == response.status)) {
                const contentDisposition = response.headers["content-disposition"]
                const contentDispositions = contentDisposition.split(';')
                const fileNames = contentDispositions[contentDispositions.length - 1].split('=')
                fileName = fileNames[fileNames.length - 1]
                saveAs(response.data, fileName)
            }
        }
    }
}
</script>

버튼을 2개 배치한 것만의 간단한 UI입니다.
다운로드하는 파일은 CSV와 PNG의 두 종류입니다.
버튼을 클릭하면 해당 파일 이름(sample.csv or sample.png)을 인수로 사용하여 Web API를 실행합니다.
웹 API 실행 후 자동으로 파일을 저장합니다.

웹 API 실행

Download.vue(발췌)

    const response = await axios.get(urljoin('http://localhost:3000/api/download'), {
        responseType: 'blob',
        params: {
            'file': fileName
        }
    }).catch((error) => {
        console.log(error)
    })

해설

웹 API를 실행하려면 axios를 사용합니다.
또한 responseType: 'blob' 에서 받는 형식을 Blob 형식으로 지정합니다.
(후술하는 saveAs@file-saver 로 Blob 형의 데이터를 지정하기 위해)

파일 저장

Download.vue(발췌)

    const contentDisposition = response.headers["content-disposition"]
    const contentDispositions = contentDisposition.split(';')
    const fileNames = contentDispositions[contentDispositions.length - 1].split('=')
    fileName = fileNames[fileNames.length - 1]
    saveAs(response.data, fileName)

해설

Web API 측에서 content-disposition (헤더)에 파일명을 지정하고 있어, 보존시의 파일명에 사용하고 있습니다.
파일 저장은 file-saver 를 사용합니다 (매우 편리).
saveAs에 Blob 형식의 데이터와 파일 이름을 지정하면 자동으로 다운로드가 시작됩니다.

동작 확인

첫 번째 응용 프로그램도 함께 시작됩니다.
각 버튼을 누르면 파일 다운로드가 시작되었음을 알 수 있습니다.

요약

2회에 걸쳐 Web API와 Web UI로 파일 다운로드의 샘플을 소개했습니다.
복잡한 코드를 작성하지 않고도 여러 라이브러리를 사용하여 쉽게 구현할 수있었습니다.
Web API 로 데이터를 취득해, 보존용의 모듈로 데이터에 데이터를 건네주고 있을 뿐이므로, 어레인지도 하기 쉽다고 생각합니다.

이번에 사용한 코드는 GitHub에서 공개하고 있습니다.
htps : // 기주 b. 코 m / 퐁코 2 분 / ゔ 에치 fy - ぃ ぇ ぉ