jhhan의 블로그

Vue.js - Excel Download 바로 처리하기 본문

Vue.js

Vue.js - Excel Download 바로 처리하기

jhhan000 2021. 2. 14. 22:54

이번 포스트는 Vue.js에서 Excel을 바로 다운로드 하는 법에 대해서 다룹니다.

 

이전에도 Spring / Vue & Spring 카테고리에서도 이 주제를 계속 다뤘습니다.

사실 지금까지 다룰 줄 몰랐습니다.

 

이번에는 백엔드 처리를 거치지 않고 바로 프론트 작업만으로 엑셀 다운로드를 할 수 있게 할 것입니다.

라이브러리를 사용하는 경우와 안하는 경우 2가지를 보여드릴 것입니다.

 

물론 Vue.js 프로젝트 하나 만들어서 진행하셔야 합니다.

 

1. 라이브러리를 사용하지 않는 경우

 

참고한 사이트입니다.

newehblog.tistory.com/3

 

먼저 코드입니다.

<template>
  <div id="app">
    <div>
      <table id="table">
        <thead>
        <tr>
          <th>id</th>
          <th>name</th>
          <th>age</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>1</td>
          <td>aa</td>
          <td>24</td>
        </tr>
        <tr>
          <td>2</td>
          <td>bb</td>
          <td>46</td>
        </tr>
        <tr>
          <td>3</td>
          <td>cc</td>
          <td>84</td>
        </tr>
        </tbody>
      </table>
      <button @click="makeExcelFile4">Excel4</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
    }
  },
  methods: {
    makeExcelFile4 () {
      let tab_text = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">'
      tab_text += '<head><meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">'
      tab_text += '<xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'
      tab_text += '<x:Name>Test Sheet</x:Name>'
      tab_text += '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>'
      tab_text += '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>'
      tab_text += "<table>"
      const temp = document.getElementById('table').innerHTML
      // console.log(temp)
      tab_text += temp
      tab_text += '</table></body></html>'
      console.log(tab_text)
      const fileName = 'exampleTable.xls'
      const a_tag = document.createElement('a')
      const blob = new Blob([tab_text], { type: 'application/vnd.ms-excel;charset=utf-8;' })
      a_tag.href = window.URL.createObjectURL(blob)
      a_tag.download = fileName
      a_tag.click()
    }
  }
}
</script>

엑셀로 다운받을 데이터를 먼저 테이블로 만들었습니다.

그리고 엑셀 다운을 할 수 있는 JavaScript 코드도 만들었습니다.

그리고 실행을 한다면

이 화면을 볼 수 있습니다.

그럼 버튼을 눌러봅니다.

이렇게 다운이 잘 됩니다.

그럼 이 엑셀 파일을 실행해서 제대로 정보가 전송되었는지 확인해 봅니다.

실행을 해본다면 무엇인가 오류가 있다고 뜹니다. 

그래도 '예' 버튼을 눌러서 진행합니다.

그러면

하하하 데이터가 잘 전송된 것을 알 수 있습니다.

후반부에 무엇인가 이상하긴 했지만, 일단 다운로드가 잘 되었으니 넘어갑니다.

마지막에 코멘트를 적겠습니다.

 

2. 라이브러리를 사용하는 경우

이번에는 라이브러리를 사용합니다.

npm install --save xlsx

xlsx 라이브러리를 설치합니다.

다른 라이브러리들도 있다고 하는데, 이 라이브러리가 가장 대중성이 있다고 하네요.

다음으로 코드입니다.

<template>
  <div id="app">
    <div>
      <button @click="makeExcelFile5">Excel5</button>
    </div>
  </div>
</template>

<script>
import Xlsx from 'xlsx'

export default {
  name: 'App',
  data () {
    return {
      data1: [
        {
          mode: 1,
          affinity: 0.5,
          lb: 1.34,
          ub: 2.53,
          pUrl: "purl1",
          qUrl: "qurl1"
        },
        {
          mode: 2,
          affinity: 1.5,
          lb: 13.34,
          ub: 2.453,
          pUrl: "purl2",
          qUrl: "qurl2"
        }
      ]
    }
  },
  methods: {
    makeExcelFile5 () {
      const workBook = Xlsx.utils.book_new()
      const workSheet = Xlsx.utils.json_to_sheet(this.data1)
      Xlsx.utils.book_append_sheet(workBook, workSheet, 'example')
      Xlsx.writeFile(workBook, 'example.xlsx')
    }
  }
}
</script>

<style>
</style>

아까하고는 다르게 json 데이터를 사용합니다.
(이 데이터는 예전에 제가 다른 곳에 적었던 것 그대로 활용합니다. ㅋㅋㅋㅋ)

그리고 xlsx 라이브러리를 사용해서 4개의 함수를 사용합니다.

  • book_new: workbook을 하나 만듭니다. 엑셀 파일을 하나 만드는 거죠
  • json_to_sheet: json 데이터를 worksheet 형태로 변환합니다.
  • book_append_sheet: sheet을 book에다 넣습니다. 이 때 sheet의 이름도 정합니다.
  • writeFile: 엑셀 파일을 다운로드 합니다. 이 때 엑셀 파일의 이름도 지정합니다(확장자까지 포함).

정확하다고는 못하지만, 대충 저런 느낌의 함수입니다.

그럼 이제 실행을 해봅니다.

디자인은 형편없습니다. ㅋㅋㅋ 버튼하나만 달랑 나오게 했네요..

그럼 이제 이 버튼을 클릭합니다.

파일이 정상적으로 다운로드 됩니다.

그럼 이제 정상적으로 다운이 되었는지 열어봅니다.

오류도 뜨지 않고 정상적으로 뜨는 것을 확인할 수 있습니다.

 

 

 

 

자 이렇게 2가지 방법을 살펴봤습니다.

  • 라이브러리 사용X : 코드가 길어진다. 라이브러리 추가가 없으므로 성능 하락이 없다.
  • 라이브러리 사용  : 코드가 짧아진다. 라이브러리 추가로 인한 성능 하락이 있다.

 

사실 라이브러리를 사용하지 않는 이유는 딱 하나입니다. → 성능하락을 막기 위해서입니다.

사실 위에 저 코드가 정상적인 코드는 아닙니다. 엑셀 파일을 열려고 할 때 문제가 생기니까요.

하지만 파일을 보는데는 큰 문제가 없어서 일단은 넘어가는 것으로 했습니다.

실제 업무에서도 일단은 이 문제를 큰 문제라고 인식하지 않아서 넘어가더군요.

사실 jQuery로 짜여진 코드를 javascript로 변환하면서 생긴 오류일 수도 있습니다.

좀 더 정확한 코드를 원한다면 , 제 글은 도움이 되지 않는다고 볼 수 있겠네요...

 

그에 비해 라이브러리를 사용한 코드는 아주 간단하고 알아보기도 편합니다.

이것을 사용할 때의 단점은 라이브러리 추가로 인한 성능 하락입니다.

성능 하락은 사실 프로그램 개발할 때 아주 매우 많이 생각해야 하기 때문에 사실 안 쓰는 것이 좋습니다.

근데 (제가 초보자여서 그런건지 모르겠지만) 성능하락이 어느정도 이루어지는지 알 수 없습니다.

아주 미미한 성능하락이 이루어진다면 그냥 쓰는 것도 나쁘지는 않겠죠!

... 어쨌든 제가 할 때는 성능하락이 있을 거란 말이 있었기에 강제로 첫번째 방법으로 진행을 했습니다.

물론 json 데이터를 단순 엑셀 다운로드만 하는 경우를 생각했을 때 저런 라이브러리를 사용하는 것이 비효율적이라고 생각할 수도 있습니다.

 

그리고 사용비율로 본다면

열에 여덟, 아홉은 xlsx 라이브러리를 사용합니다. 그리고 나머지는 다른 라이브러리를 사용합니다.

라이브러리 사용을 안하는 경우는 아예 검색을 다르게 해서 찾아야 합니다.

라이브러리 사용으로 인한 성능하락이 심각한 경우에는 당연히 사람들이 코딩을 직접 진행할 것입니다.

그렇지만 대부분의 사람들이 라이브러리를 사용해서 진행합니다.

그러는 건 그만한 이유가 있겠죠.

 

그러니깐, 엑셀 다운로드를 프론트에서 바로 진행할 경우

왠만하면, 라이브러리를 이용해서 진행하시기 바랍니다...

(제가 이거 때문에 이틀 날려먹어서 좀 분해서 적습니다... 머 이렇게 알아가는 것도 중요한 점이죠.)

'Vue.js' 카테고리의 다른 글

vue.js 다시 시작해보기  (0) 2022.08.25
package-lock.json 이란?  (0) 2021.02.21
ESLint Error 혹은 Warning 관련  (0) 2020.11.19
Vuetify(4)  (2) 2020.07.07
Vuetify(3)  (0) 2020.06.10
'Vue.js' Related Articles more