AppsScript - 스프레드시트로 HTML 표 만들어 메일 전송

정태경·2022년 1월 15일
0

STEP 1. HTML 구조 추출하기

1-1. 구글 스프레드 시트를 활용하여 보내고자 하는 표를 만들고 메일에 첨부하여 발송한다.

그 후 Gmail 받은 편지함에서 메일을 선택하여 원본 보기를 누른다.

1-2. 원본 소스에서 "Content-Type: text/html;" 을 찾은 후 해당 문구 기준으로 아래에 위치한 HTML 코드를 복사해온다. 이때 주의 사항으로는 맨 밑에 위치한 "—XXXXXXXXXXXX" 이 부분은 제거한다.

1-3. 복사한 코드는 디코딩하는 과정을 거친다.

첨부된 URL 에 접속하여 Encoded 에 복사한 코드를 붙여넣고 Decode 버튼을 누른다. (링크)

1-4. 디코딩된 HTML 구조를 보기가 어려울 수 있으니 HTML html pretty text 를 사용하여 prettifying 과정을 거친다. 이 과정을 거치면 HTML 구조를 따라가기가 훨씬 수월하다. (링크)

STEP 2. 스프레드 시트에서 HTML 템플릿 생성

2-1. 스크립트 편집기에 접근한다

2-2. HTML 템플릿을 생성한다

아래와 같이 기본 콘텐츠가 채워진 HTML 이 생성된다.

2-3. 기본 콘텐츠를 모두 제거하고 위에서 생성한 HTML 코드를 붙여넣는다. 생성된 HTML 템플릿의 이름도 "Template.html" 로 변경하였다.

STEP 3. 스프레드 시트에서 표 작성 및 데이터 이름 할당

3-1. 1-1 스텝에서 생성한 표 범위를 지정하고 범위에 이름을 할당한다

아래와 같이 "Table" 이라고 이름을 지어줬다.

STEP 4. Apps Script 작성

/* 이메일 전송 함수 */
function sendEmail() {
  var htmlBody = getEmailHtml();
  
  MailApp.sendEmail({
    to: "tkjung@afewgoodsoft.com", // 수신인 
    subject: "E-mail send test ", // 제목
    htmlBody: htmlBody 
  });
}

/* 이름이 지정된 범위에서 데이터 읽어오기 */
function getData() {
  var values = SpreadsheetApp.getActive().getSheetByName("Data").getRange("Table").getValues();
  values.shift(); // 헤더 삭제
  Logger.log(values); // 읽어온 데이터 로그 출력
  return values;
}

/* Template.html 파일 읽어오기 */
function getEmailHtml() {
  var htmlTemplate = HtmlService.createTemplateFromFile("Template.html");
  var htmlBody = htmlTemplate.evaluate().getContent();
  return htmlBody;
}

STEP 5. Apps Script 의 전역 변수를 "Template.html" 파일에 적용

5-1. Apps Script 코드

var values = SpreadsheetApp.getActive().getSheetByName("Data").getRange("Table").getValues(); // 범위 값
var col = (SpreadsheetApp.getActive().getSheetByName("Data").getRange("Table").getNumColumns())  - 1; // 범위 열 넘버
var row = SpreadsheetApp.getActive().getSheetByName("Data").getRange("Table").getNumRows(); // 범위 행 넘버

function sendEmail() {
  var htmlBody = getEmailHtml();
  
  MailApp.sendEmail({
    to: "tkjung@afewgoodsoft.com",
    subject: "E-mail send test ",
    htmlBody: htmlBody
  });
}

function getEmailHtml() {
  var htmlTemplate = HtmlService.createTemplateFromFile("Template.html");
  var htmlBody = htmlTemplate.evaluate().getContent();
  return htmlBody;
}

5-2. Apps Script 에 할당된 전역 변수를 가져와 HTML 템플릿 에 활용한다.

테이블 value를 아래와 같은 형태로 변경하여 활용한다

<?= test[0][1] ?>

STEP 6. 작성이 완료된 Apps Script 실행 하여 테스트한다.

STEP 7. 결과 확인

profile
現 두나무 업비트 QA 엔지니어, 前 마이리얼트립 TQA 엔지니어

0개의 댓글