sk_fems_ui commit

components/common/BtnXlsx.vue

@@ -0,0 +1,77 @@
+<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>