TIL#163 VueJS & DRF excel download

drf에서는 따로 openpyxl 라이브러리를 쓰지 않고 drf-excel 라이브러리만 사용해도 엑셀 다운로드가 가능하다.
pip install drf-excel

# settings.py

REST_FRAMEWORK = {
	...
    'DEFAULT_RENDERER_CLASSES': [
        'rest_framework.renderers.JSONRenderer',
        'rest_framework.renderers.BrowsableAPIRenderer',
        'drf_excel.renderers.XLSXRenderer',
    ],
    ...
}

# views.py

from rest_framework import viewsets
from drf_excel.mixins import XLSXFileMixin
from drf_excel.renderers import XLSXRenderer

class ExcelView(XLSXFileMixin, viewsets.ReadOnlyModelViewSet):
    queryset = your queryset
    serializer_class = your serializer
    renderer_classes = (XLSXRenderer, )
    
    # 결과물을 조금 더 custom 하고 싶다면
    column_header = {
        header title name, style...
    }
    body = {
        height, style(font, alignment...)
    }
    
    # 필요하다면
    def get_queryset(self):
        필요한 로직 작성
        

이렇게 만든 데이터를 프론트엔드에서 받아서 로컬 컴퓨터로 다운로드 시켜주면 된다.

// vuejs

function excelDownload() {
  axios.defaults.baseURL = 'your backend base url'
  // 필요시 headers 도 추가한다 ( token 등 )
  // responseType: 'blob' 매우 중요!
  axios.get('api url', {responseType: 'blob'})
    .then((data) => {
      const url = window.URL.createObjectURL(new Blob([data.data]))
      const a = document.createElement('a')
      a.href = url
      const filename = 'filename.xlsx'
      a.setAttribute('download', filename)
      document.body.appendChild(a)
      a.click()
      a.remove()
    }).catch((response) => {console.log(response)})