vue 엑셀 다운로드 기능 구현 (xlsx)

vue에서 xlsx을 사용하여 엑셀 다운로드 기능을 구현하는 방법이다.

npm install --save xlsx 으로 설치 후 다음과 같은 방식으로 작성하면 된다.

[테스트 버전]

- vue: 2.6.11

- xlsx: 0.16.6

[소스코드]

<button @click="exportExcel">Excel Download</button>

import XLSX from 'xlsx'

export default {
  data() {
    return {
      tableData: [{
        date: '2019-12-12',
        name: 'testData'
      }]
    }
  },
  methods: {
    exportExcel() {
      const wb = XLSX.utils.book_new()    // 엑셀 파일 생성 (workbook)
      const ws = XLSX.utils.json_to_sheet(this.tableData)    // 시트 생성 (worksheet) 및 데이터 삽입
      
      XLSX.utils.book_append_sheet(wb, ws, 'sheet1')  // 엑셀 파일에 시트 추가

      XLSX.writeFile(wb, 'result.xlsx') // 엑셀 다운로드
    }
  }
}

 

 

I made a thumbnail for free in website "www.forcre.co.kr"