티스토리 뷰
1) 엑셀 다운로드 버튼 onclick 함수
<input style="float: right; background-color: green; margin-right: 10px; margin-bottom: 10px;" type="button" class="btn btn-primary" onclick="excelDownLoad('replyTable', 'title')" value="다운로드">2) 엑셀 다운로드 함수
function excelDownLoad(id, title) {
bootbox.confirm("교환/반품 접수지를 엑셀로 다운 받으시겠습니까?", function (result) {
if (result == true) {
var tab_text = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">';
tab_text = tab_text + '<head><meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
tab_text = tab_text + '<xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'
tab_text = tab_text + '<x:Name>Test Sheet</x:Name>';
tab_text = tab_text + '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>';
tab_text = tab_text + '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>';
tab_text = tab_text + "<table border='1px'>";
//엑셀다운로드 시 저장될 테이블 지정하여 복사
var exportTable = $('#replyTable').clone();
exportTable.find('thead > tr th:nth-child(6)').remove();
exportTable.find('tbody tr td:nth-child(6)').remove();
tab_text = tab_text + exportTable.html().replaceAll("<textarea","<span").replaceAll("</textarea>","</span>")
tab_text = tab_text + '</table></body></html>';
var data_type = 'data:application/vnd.ms-excel';
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
var fileName = title + '.xls';
//Explorer 환경에서 다운로드
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
if (window.navigator.msSaveBlob) {
var blob = new Blob([tab_text], {
type: "application/csv;charset=utf-8;"
});
navigator.msSaveBlob(blob, fileName);
}
} else {
var blob2 = new Blob([tab_text], {
type: "application/csv;charset=utf-8;"
});
var filename = fileName;
var elem = window.document.createElement('a');
elem.href = window.URL.createObjectURL(blob2);
elem.download = filename;
document.body.appendChild(elem);
elem.click();
document.body.removeChild(elem);
}
}
});
}- 테이블 id를 가져와 테이블 복사
- .find()로 테이블 헤드의 tr th:nth-child(6) 요소를 .remove() 한다.
- .find()로 테이블 바디의 tbody tr td:nth-child(6) 요소를 .remove() 한다.
- 테이블명.html().replaceAll("<textarea", "<span").replaceAll("</textarea>", "</span")
=> 테이블의 모든 html 요소를 가져와서 <textarea> 태그를 <span> 태그로 바꾼다.
출처: https://newehblog.tistory.com/3?category=834444
자바스크립트 엑셀 다운로드 방법
오늘의 포스팅은 자바스크립트로 HTML 테이블을 엑셀로 다운로드하는 기능에 대해 알아보겠습니다 ^~^ 백엔드 언어 없이 자바스크립트로만 구현이 가능해서 간편하고 손쉽게 만들 수 있습니다.
newehblog.tistory.com
'jQuery' 카테고리의 다른 글
| select 박스의 option 값 가져오기 (1) | 2023.10.23 |
|---|---|
| 표에서 메모를 수정하는 버튼 기능 (0) | 2023.10.16 |
| class명으로 each문 사용, 따옴표 처리, 버튼 숨기기 (0) | 2023.09.12 |
| 쿠폰이 없는 경우 비활성화 처리하기 (0) | 2023.08.17 |
| [jQuery] $(document).ready(function () { }); (0) | 2023.08.10 |