[개발자의품격][부트캠프][1기][22차시] Vue.js #12 | excel 다운로드

excel 다운로드

exceljs, file-saver 모듈을 이용해 "excel 다운로드" 기능을 구현한다.

 

exceljs 설치

https://github.com/exceljs/exceljs

npm install exceljs

 

file-saver 설치

npm install file-saver

 

index.js

exceljs, file-saver를 import 한다. $ExcelFromTable() 함수를 작성한다.

// src/mixins/index.js
...
import ExcelJS from 'exceljs'
import { saveAs } from 'file-saver'

export default {
  ...
  methods: {
    ...
    async $ExcelFromTable(
      header = [],
      rows = [],
      fileName = 'excel',
      option = {}
    ) {
      header = header.filter((h) => h.title && h.key)
      // https://github.com/exceljs/exceljs#tables
      const wb = new ExcelJS.Workbook()
      const ws = wb.addWorksheet() // name,{pageSetup:https://github.com/exceljs/exceljs#page-setup}
      ws.addTable({
        name: 'myTable',
        ref: 'A1',
        headerRow: true,
        // style: { theme: 'TableStyleDark3', showRowStripes: true },
        columns: header.map((h) => ({
          name: h.title
        })), // width 설정가능, total함수 가능
        rows: rows.map((r) => header.map((h) => r[h.key])),
        ...option
      })

      saveAs(new Blob([await wb.xlsx.writeBuffer()]), `${fileName}.xlsx`)
    }
  }
}

 

ListView 컴포넌트

ListView.vue 컴포넌트의 <template> 태그에 "엑셀 다운로드" 버튼을 생성한다.

<!-- src/views/4_reuse/ListView.vue -->
<template>
  <div class="container">
    ...
    <button class="btn btn-danger" @click="doExcel">엑셀다운로드</button>

 

ListView.vue 컴포넌트의 methods에 doExcel() 함수를 선언한다. $ExcelFromTable() 함수를 사용해 headers, drinkList 데이터를 'drinklist.xlsx'파일로 저장하는 기능이다.

// src/views/4_reuse/ListView.vue
...
<script>
...
export default {
  ...
  data() {
    return {
      headers: [
        ...
      ],
      drinkList: []
      ...
    }
  },
  ...
  methods: {
    doSearch() {
      this.drinkList = [
        ...
      ]
    },
    ...
    // doExcel() 함수를 선언한다.
    doExcel() {
      this.$ExcelFromTable(this.headers, this.drinkList, 'drinklist')
    }
  }
}
</script>