반응형
이 기능은 다른 라이브러리 없이 구현 한 것으로 다소 허접해 보이긴 합니다 ㅎㅎ
그리고 스타일이 적용 되지 않은 소스코드로 스타일이 필요없을때 사용 하면 되겠습니다
이 전 포스팅에서 했던 페이징 기능의 list 배열 객체를 이용해서 엑셀 다운로드 기능을 만들어 보도록 하겠습니다
//다운로드 버튼 생성
<input type="button" value="엑셀다운로드" onclick="download();"/>다운로드 버튼을 하나 생성 해주고
download 함수를 만들어 봅시다
html 태그를 생성해서 엑셀 다운로드로 만들어 보도록 할 것이므로 변수에 html 태그를 생성합니다
function download() {
let excelTable = "";
excelTable += "<table border='1'>";
excelTable += " <thead>";
excelTable += " <tr>";
excelTable += " <td>No</td>";
excelTable += " <td>구분</td>";
excelTable += " <td>수식</td>";
excelTable += " <td>계산주파수</td>";
excelTable += " <td>충돌여부</td>";
excelTable += " </tr>";
excelTable += " </thead>";
excelTable += " <tbody>";
if (list.length > 0) {
for (let i = 0; i < list.length; i++) {
excelTable += "<tr>";
excelTable += " <td>"+list[i].no+"</td>";
excelTable += " <td>"+list[i].gubun+"</td>";
excelTable += " <td>"+list[i].formula+"</td>";
excelTable += " <td>"+list[i].calcFrq+"</td>";
excelTable += " <td>"+list[i].collisMsg+"</td>";
excelTable += "</tr>";
}
} else {
excelTable += "<tr>";
excelTable += " <td colspan='5'>데이터가 없습니다</td>";
excelTable += "</tr>";
}
excelTable += " </tbody>";
excelTable += " </table>";
//파일명, 시트명, html
excelDown("test.xml", "sheets1", excelTable);
}엑셀로 만들 html을 만들었습니다 이제 실제로 엑셀 파일을 만들어서 다운로드 하는 excelDown 함수를 만들어 봅시다
function excelDown(fileName, sheetName, sheetHtml) {
let html = "";
html += "<html xmlns:x='urn:schemas-microsoft-com:office:excel' >";
html += " <haed>";
html += " <meta http-equiv='content-type' content='application/vnd.ms-excel; charset=UTF-8'>";
html += " <xml>";
html += " <x:ExcelWorkbook>";
html += " <x:ExcelWorksheets>";
html += " <x:ExcelWorksheets>";
html += " <x:name>"+sheetName+"</x:name>";
html += " <x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions>";
html += " </x:ExcelWorksheets>";
html += " </x:ExcelWorksheets>";
html += " </x:ExcelWorkbook>";
html += " </xml>";
html += " </haed>";
html += " <body>";
html += sheetHtml;
html += " </body>";
html += "</html>";
let data_type = "data:application/vnd.ms-excel";
let ua = window.navigator.userAgent;
let blob = new Blob([html], {type: "application/csv; charset=utf-8"});
let anchor = window.document.createElement('a');
anchor.href = window.URL.createObjectURL(blob);
anchor.download = fileName;
document.body.appendChild(anchor);
anchor.click();
//다운로드 후 제거
document.body.removeChild(anchor);
}
이 함수로 엑셀 다운로드를 가능하게 합니다 감사합니다
반응형
'Developer > Javascript' 카테고리의 다른 글
| [javascript] 다중팝업 제어 (0) | 2023.01.12 |
|---|---|
| [javascript]div태그를 input처럼 사용하고 전체 선택 설정 (0) | 2022.10.06 |
| [javascript] 페이징 처리 (0) | 2022.08.11 |
| [javascript] input 글자수 제한하기 (0) | 2022.07.27 |
| [javascript]radio 전체 체크하기 (0) | 2022.07.12 |