[VueJS] 엑셀 다운로드(Excel download)

ㅁ xlsx 설치

npm install xlsx

install xlsx 링크 바로가기

 

ㅁ 실행코드

엑셀 다운로드를 위한 화면 구성

<div>
	<div class="row">
        <div class="col-12 pb-25 pt-5">
            <button type="button" class="btn btn-outline mb-5" style="float: right;" @click="excelDown()">
              엑셀 다운로드
              <i class="fa fa-download" />
            </button>
        </div>
    </div>
    <div class="row" style="height: 70%;">
      <div class="col-12" style="height: 100%;">
        <div class="table-responsive" style="height: 100%;">
          <table class="table mb-0 overflow-y-auto" style="text-align: center;">
            <thead style="background-color: #8793ac;">
              <tr>
                <th class="font-weight-bolder" scope="col">
                  이름
                </th>
                <th class="font-weight-bolder" scope="col">
                  나이
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="person in people">
                <td>
                  {{ person.name }}
                </td>
                <td>
                  {{ person.age }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
</div>

엑셀다운로드 기능을 실행하기위한 vuejs 코드

//vuejs
import XLSX from 'xlsx';	//엑셀 다운로드를 위해서 import 필요

export default Vue.extend({
  data(): any {
    return {
      excel: [],
      people: [
        { name: '유재석', age: '13' },
        { name: '박명수', age: '14' },
      ],
    };
  },
  methods: {
    excelDown() {
      for (const excel of this.people) {
        const excelLogs = {
          이름: '',
          나이: '',
        };
        excelLogs.이름 = excel.name;
        excelLogs.나이 = excel.age;

        this.excel.push(excelLogs);
      }

      // 엑셀 워크시트로 json 내보내기, 배열만 가능
      const dataWS = XLSX.utils.json_to_sheet(this.excel);
      // 엑셀의 workbook(엑셀파일에 지정된 이름)을 만든다
      const wb = XLSX.utils.book_new();
      // workbook에 워크시트 추가, 시트명은 'peopleData'
      XLSX.utils.book_append_sheet(wb, dataWS, 'peopleData');
      // 엑셀 파일을 내보낸다. 엑셀 파일 저장명은 'people.xlsx'
      XLSX.writeFile(wb, 'people.xlsx');
    },
  },
});

 

ㅁ 실행결과

엑셀 다운로드를 위한 화면 구성

엑셀 다운로드 클릭시 실행 화면

다운로드된 엑셀