개요

강의 계획서 출력을 위해 강의계획이라는 이름으로 폼을 만들고 위 이미지처럼 출력될 정보를 구성했습니다. 그리고 간단하게 내용도 넣었습니다. 이제 이 데이터를 이용해서 문서를 생성해볼 것인데요. 문서 생성을 위해서는 일단 문서의 템플릿이 필요합니다.

앱의 설정에 들어가서 좌측의 메뉴에서 파일을 찾아 클릭합니다.

새 폴더 버튼을 클릭합니다. 이 폴더 안에다가 문서의 템플릿을 만들겁니다. 폴더 이름을 입력하고 확인 버튼을 클릭합니다. 저는 문서양식이라는 이름의 폴더를 만들었습니다.

방금 만든 폴더에 우클릭을 해서 새 파일을 클릭합니다. 

이런 창이 뜨는데 왼쪽에서 word를 클릭하고 파일 이름을 입력합니다. 저는 강의계획서라고 지을겁니다. 그 다음에 확인 버튼을 클릭합니다. 그러면 폴더 안에 파일이 만들어집니다.

미리보기에 없던 것이 생겼는데, 여기서 수정 버튼을 클릭해봅시다. 방금 만든 파일을 수정해보는겁니다.

이런 화면이 나타납니다. 여기서 문서의 양식을 구성해주시면 되는데, 표를 이용해도 좋고 원하는대로 작성하시면 됩니다. 규칙은 간단합니다. 데이터가 들어가는 부분에는 다음과 같이 작성하면 됩니다.

빨간색으로 표시한 부분이 데이터가 들어가는 부분입니다. ${} 안에다가 data.info.[컬럼이름] 이라고 작성하면 됩니다. 여러분이 만든 폼에서 컬럼을 확인해보시고 내용을 채워 넣으면 되겠습니다.

여러분이 만든 컬럼 중에서 편집기 도구를 이용한 부분이 있다면 편집기로 만든 값들은 다음과 같이 처리해주어야 합니다. 편집기 도구의 값은 HTML 문서 형식으로 저장되기 때문에 정상적으로 출력되게 하기 위한 절차입니다.

편집기 도구를 통해 만든 값에 키보드 커서를 옮깁니다. 혹은 그냥 클릭 한 번 하면 됩니다.

그 후에 이미지에 표시된 버튼을 클릭합니다. 버튼의 색이 검은색으로 변했다면 성공입니다. 

이렇게 양식을 만들었으면 마지막으로 버튼을 만들어야 합니다. 문서는 저장을 꼭 해주시고 폼으로 돌아가서 폼을 수정합니다.

버튼을 가져다놓고 이름을 바꿔줍니다. 저는 강의계획서니까 이렇게 지었습니다. 버튼을 클릭한 상태에서 우측의 옵션창의 스크롤을 내려보면

세부 속성이 있습니다. 함수 호출에

이런식으로 입력을 하는데, 규칙은 이렇습니다.

form2PdfPrint("양식문서 URL","파일이름")

해당하는 내용을 넣어주면 됩니다.

파일에서 우클릭하면 나오는 메뉴에서 속성을 클릭합니다.

표시된 부분을 복사해서 form2PdfPrint("여기에 넣으면 됩니다.","파일이름") 첫번째 자리에 넣으면 됩니다.

버튼을 다 만들었으면 이제 저장을 하고 이전으로 돌아갑시다.

만든 버튼을 클릭해보시면 다음과 같은 화면이 나타났다면 성공입니다.

form.customApprovalHTML=(flowListData)=>{

  let td1 = '';

  let td2 = '';

  flowListData.forEach(item=>{

    td1 += `<td>${item.userName}</td>`;

    td2 += `<td>${item.state=='done'?'승인':'&nbsp'}</td>`;

  })

  let result = `

<table border=1>

<tbody><tr>${td1}</tr><tr>${td2}</tr></tbody>

</table>

`;

  return result;

}

위는 사용자정의함수(customApprovalHTML)를 이용한 출력이고

아래는 양식에서 flowList 배열자료를 이용하여 출력한 방식입니다.