78 lines
1.9 KiB
Vue
78 lines
1.9 KiB
Vue
<template>
|
|
<div id="btnExeclDownload">
|
|
<v-btn class="v-btn__round v-btn__excel" @click="downloadExcelFile">
|
|
<v-icon>mdi-microsoft-excel</v-icon>
|
|
엑셀
|
|
</v-btn>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import XLSX from 'xlsx';
|
|
|
|
export default {
|
|
name: 'btnExeclDownload',
|
|
props: {
|
|
xlsHeader: {
|
|
// JSON 데이터로 만들 시 필요
|
|
type: Array,
|
|
default: [],
|
|
},
|
|
xlsRowData: {
|
|
// JSON 데이터로 만들 시 필요
|
|
type: Array,
|
|
default: [],
|
|
},
|
|
tableId: {
|
|
// 성성된 테이블 그대로 쓸 경우 그리드에 id 지정 후 바인딩
|
|
type: String,
|
|
default: null,
|
|
},
|
|
fileName: {
|
|
// 테이블이 하나일 경우, 현재 활성화 메뉴명을 가져와도 될듯,.
|
|
type: String,
|
|
required: true,
|
|
},
|
|
sheetName: {
|
|
// 지정된 시트명이 없으면 'Sheet1'
|
|
type: String,
|
|
default: null,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
xlsData: [],
|
|
};
|
|
},
|
|
methods: {
|
|
setExcelData() {
|
|
let tmpData = [];
|
|
let tmpMap = {};
|
|
this.xlsRowData.map(item => {
|
|
this.xlsHeader.map(v => {
|
|
return Object.assign(tmpMap, { [v.header]: item[v.name] || '' });
|
|
});
|
|
tmpData = tmpData.concat(tmpMap);
|
|
tmpMap = {};
|
|
});
|
|
this.xlsData = tmpData;
|
|
tmpData = null;
|
|
tmpMap = null;
|
|
},
|
|
async downloadExcelFile() {
|
|
if (!this.tableId) await this.setExcelData(); // 들어온 JSON 데이타 가공
|
|
|
|
const workBook = XLSX.utils.book_new(); // 새 시트 생성
|
|
const excelData = this.tableId
|
|
? // 테이블 그대로 가져올때
|
|
XLSX.utils.table_to_sheet(document.getElementById(this.tableId))
|
|
: // JSON 형식으로 가져올때
|
|
XLSX.utils.json_to_sheet(this.xlsData);
|
|
const sheetName = this.sheetName || null;
|
|
XLSX.utils.book_append_sheet(workBook, excelData, sheetName); // 시트 명명, 데이터 지정
|
|
XLSX.writeFile(workBook, `${this.fileName}.xlsx`); // 엑셀파일 만듬
|
|
},
|
|
},
|
|
};
|
|
</script>
|