구글스프레드시트 자동화

자바스크립트로 Html 테이블 데이터 다운로드하기 (sheetJS + 약간의 css)

Mr.Zee 2022. 7. 11.

javascript excel/xlsxl,csv download (22년 7월 확인)

Table을 자바스크립트를 통해 엑셀파일로 다운로드 받고싶을 때 사용할 수 있는 라이브러리 입니다.

<table></table> 형태의 태그에 감싸진 데이터는 대부분 가능한 것 같네요!

마법같은 묘기를 부려줄 오늘의 라이브러리는!!

1. sheetJS 소개

단 두줄의 코드로 마법같은 일을 가능하게 해줍니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.3/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>

웹페이지에 테이블을 만들어놓고 다운로드 받게끔 하고싶을 때 저 코드 두줄과

버튼, 테이블, 자바스크립트를 연결하면 완료!

물론 이 부분이 공식 문서보고도 따라하기가 쉽지 않아요...ㅠ

2. 워크시트 (엑셀)파일을 만들어 주는 함수만들기

/* The live editor requires this function wrapper */
function Table2XLSX(props) {

/* Callback invoked when the button is clicked */
 const xport = React.useCallback(async () => {

/* Create worksheet from HTML DOM TABLE */
 const table = document.getElementById("Table2XLSX");
 const wb = XLSX.utils.table_to_book(table);

/* Export to file (start a download) */

XLSX.writeFile(wb, "SheetJSTable.xlsx");
  });

공식 문서에는 요모양으로 설명해주고 있는데 실제로 사용하기 위해서는 총 5단계로 나뉘더라구요! 에잇 설명 좀 자세하게 해놓지... Python의 판다스 문법과 조금은 비슷한거 같기도 해요~

step 1. workbook 생성

step 2. 시트 만들기

step 3. workbook에 새로만든 워크시트에 이름을 주고 붙이기

step 4. 엑셀 파일 만들기

step 5. 엑셀 파일 내보내기

하지만 너무 걱정하지 마세요 다 자료가 넘쳐나기 때문에!!

3. 실제 사례로 연습해보자.

SheetJS는 생각보다 이미 만들어진 라이브러리 세트들을 쉽게 찾아볼 수 있는편이고, 국내-해외 전문가들이 짜놓은 스크립트는 구글에서 SheetJS sample code 라고 검색해보면 됩니다~!

일단 예시 견본 html파일을 보여드리자면

<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<--sheetJS라이브러리-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.3/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>

</head>

<body>
<button type="button" id="excelDownload" class="download">엑셀파일 다운로드</button>

<table border="0" cellpadding="0" cellspacing="0" width="778" class="tb1"  id="tableData">
	<tr>
		<td valign="top" width="180" class="lml1">
        .
        .
        <--중략-->
    </tr>
</table>
</body>
<html>

버튼에 ID 와 클래스명을 각각 달아주었고

다운로드할 Table 클래스명도 지정해주었습니다.

이제 자바스크립트를 구성할 차례군요!

<script>
const excelDownload = document.querySelector('#excelDownload');

document.addEventListener('DOMContentLoaded', ()=>{
    excelDownload.addEventListener('click', exportExcel);
});

function exportExcel(){ 
//엑셀 시트 생성
  var wb = XLSX.utils.book_new();
  var newSh = excelHandler.getWorksheet();
  XLSX.utils.book_append_sheet(wb, newSh, excelHandler.getSheetName());
  var wb = XLSX.write(wb, {bookType:'xlsx',  type: 'binary'});

  saveAs(new Blob([stab(wb)],{type:"application/octet-stream"}), excelHandler.getExcelFileName());
}

var excelHandler = {
    getExcelFileName : function(){
        return '테이블다운로드.xlsx';	//파일 이름
    },
    getSheetName : function(){
        return '시트 이름';	//시트 이름
    },
    getExcelData : function(){
        return document.getElementById('tableData'); 	//TABLE id
    },
    getWorksheet : function(){
        return XLSX.utils.table_to_sheet(this.getExcelData());
    }
}

function stab(s) { 
  var buf = new ArrayBuffer(s.length); //convert s to arrayBuffer
  var view = new Uint8Array(buf);  //create uint8array as viewer
  for (var i=0; i<s.length; i++) view[i] = s.charCodeAt(i) & 0xFF; //convert to octet
  return buf;    
}

<script>

대부분은 스크립트 파일로 저장해서 사용하지만 가독성을 위해 이렇게 배열 해봤습니다.
exportExcel 함수에서

XLSX.utils.book_new(); 로 시트를 생성
excelHandler.getWorksheet(); 엑셀 파일내 파일명, 시트 이름, 가져올 데이터 등 지정
이후 부터는 시트를 쓰는데 필요한 기본적인 함수들입니다.

집중해야 하는 부분은

여기 입니다. 제가 써놓은 대로 쓰면 테이블다운로드.xlsx 파일이 여러분을 반기게 될 것이기 때문에... ㅎ

그리고 저는 table id 를 document.getElementById 속성을 통해 가져왔지만 다르게 설정하신 경우 꼭 저 부분을 건드려주셔야 겠죠.

4. sheetJS 실제 Tistory에도 적용 가능할까?

한번 티스토리에도 적용해보겠습니다.

아마 스킨을 조금 손봐야 할 수 도 있겠지만 기본적인 골조는 스크립트 추가 // 버튼과 테이블 클래스를 일치시켜주면 되니까요!

연습 테이블 1	sheetJS	CSS	Javascript	Button
난이도	3.8	3.2	4.3	2
참고 사이트	SheetJS	W3Schools	MDN Web Docs	W3Schools
주 목적	테이블을 다운로드 받기 가장 쉬운 라이브러리	예쁘게 꾸며요	기능 동작등 만능	기본 버튼부터 화려한 버튼까지

-- 07.11 추가 내용 --

티스토리는 버튼 CSS를 지정해놓지 않아서 버튼처럼 보이지 않네요.. 이부분은 스킨편집을 해줘야 할 것 같습니다.

티스토리에서 테이블만 HTML모드에서 id만 추가해줬더니 잘 동작합니다!

저작자표시 비영리 동일조건

'구글스프레드시트 자동화' 카테고리의 다른 글

구글 문서 (docs, sheet) 및 드라이브 업데이트 (0)	2023.04.05
스프레드시트에서 슬랙채널로 자동으로 '메시지'보내기 (자바스크립트 코드) (0)	2022.10.08
구글폼 제출 > QR코드 제작 부터 음성 TTS까지? (0)	2022.10.06