-
자바스크립트(javascript)로 html을 엑셀(excel) 다운로드 시키는 법IT/javascript 2022. 3. 25. 15:18
웹에서 엑셀로 다운로드 시켜주어야 할때가 있다.
보통 백엔드에서 처리해주는데, 현재 페이지에 있는 데이터들이라면,
자바스크립트로 구현이 가능하다.
없는 데이터라던가, 보안 등 특별한 사유가 아니면, 자바스크립트로 처리하는 것이 더 편한다.
단, table 로 작성해야며, 예시는 아래와 같다.
var fileName = "테스트"; var sheeet_name = "test sheet"; 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>'+sheet_name+'</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'><tr><td>테스트</td></tr></table>"; tab_text = tab_text + final_text + '</html>'; var data_type = 'data:application/vnd.ms-excel'; var ua = window.navigator.userAgent; var msie = ua.indexOf("MSIE "); var fileName = saveFileName + '.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); }table 내에 br 태그나, 기타 태그가 있는 경우 엑셀로 파일을 열어보면,
cell 내에서 줄바꿈이 안되고, 새로운 row 가 추가되어 들어가게 되는데
이럴때 아래와 같이 br태그에 style 을 추가해주면,
정상적으로 셀 내에서 줄바꿈이 된다.
<br style='mso-data-placement :same-cell;'>#excel 다운로드 #excel 줄바꿈 #html excel 다운로드 #html 엑셀 다운로드 #JavaScript #엑셀 다운로드
#엑셀 줄바꿈 #자바스크립트
'IT > javascript' 카테고리의 다른 글
웹페이지(브라우저 탭)의 숨김,표시 javascript visibilitychange event(자바스크립트 이벤트) 처리 (0) 2022.05.27 Bootstrap popover content 에 table 넣기 (0) 2022.01.06 Javascript Object(자바스크립트 오브젝트)를 쿼리 스트링(query string) 변환(파라미터 , parameter 변환) (0) 2021.11.25 모던브라우저(크롬,파이어폭스 등) console 사용 방법 (0) 2021.11.11