Files
sk_fems_ui/components/common/button/BtnExcelUpload.vue
2025-07-22 09:58:38 +07:00

89 lines
2.2 KiB
Vue

<template>
<div id="btnExeclUpload">
<!-- <v-btn class="v-btn__round v-btn__excel" @click="uploadExcelFile">
<v-icon>mdi-file-excel</v-icon>
엑셀 로드
</v-btn> -->
<a-button class="v-btn__round v-btn__excel" type="default" @click="uploadExcelFile">엑셀 로드</a-button>
</div>
</template>
<script>
import XLSX from 'xlsx';
import { mapState } from 'vuex';
export default {
name: 'btnExeclUpload',
props: {
parentPrgmId: {
type: String,
require: true,
},
gridName: {
type: String,
require: false,
},
dataPath: {
type: Object,
require: false,
default: null,
},
tableId: {
// 성성된 테이블 그대로 쓸 경우 그리드 컴포넌트에 id 지정 후 바인딩
type: String,
require: false,
default: null,
},
},
data() {
return {
xlsData: [],
};
},
computed: {
...mapState({
menuNm: state => state.activeMenuInfo.menuNm,
pageData(state) {
return state.pageData[this.parentPrgmId];
},
}),
},
methods: {
setExcelData() {
const xlsRowData = this.pageData[this.gridName].data;
const xlsHeader = this.pageData[this.gridName].column;
let tmpData = [];
let tmpMap = {};
xlsRowData.map(item => {
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 fileName = this.pageData.xlsFileInfo[this.gridName].fileName;
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.pageData.xlsFileInfo[this.gridName].sheetName;
XLSX.utils.book_append_sheet(workBook, excelData, sheetName); // 시트 명명, 데이터 지정
XLSX.writeFile(
workBook,
`${fileName ? fileName : this.menuNm.replace(/(\s*)/g, '')}.xlsx`,
); // 엑셀파일 만듬
},
},
};
</script>