태그 및 DB 데이터를 엑셀 파일(.xlsx)로 다운로드받기 (외부 자바스크립트 라이브러리 활용)

X-SCADA

태그 및 DB 데이터를 엑셀 파일(.xlsx)로 다운로드받기 (외부 자바스크립트 라이브러리 활용)

X-SCADA AI를 운영할 때 기본 기능이나 스크립트를 활용하는 것 뿐만 아니라 외부 라이브러리를 가져와서 활용하는 것이 가능합니다.

이번 시간에는 운영하면서 발생하는 데이터를 CSV 형식이 아니라 엑셀(Excel) 형식으로 다운로드하는 방법을 소개합니다.

Apache License 2.0으로 배포되는 자바스크립트 SheetJS 라이브러리(xlsx.full.min.js)를 사용하여 태그값과 데이터베이스 값을 엑셀 파일(.xlsx)로 다운로드해보겠습니다.

해당 라이브러리는 무료 버전으로, 복잡한 서식(색상, 수식 등)은 제한되며 웹(WEB) 환경에서만 사용 가능합니다.



1. X-SCADA AI Designer에서 엑셀로 내보내기에 대한 HMI를 제작한다.

a469539a2db69b09f6a99cdb89b6a1f5_1768264182_6896.png
 


2. [스크립트(Script)] 탭에서 엑셀로 내보내기에 필요한 스크립트를 작성한다.

a469539a2db69b09f6a99cdb89b6a1f5_1768264192_5664.png 

 function label_1_OnClick(event) {

    const rows = [{

        name: "홍길동",

        age: 30,

        dept: "개발"

    },

    {

        name: "김철수",

        age: 28,

        dept: "영업"

    }];

    const ws = XLSX.utils.json_to_sheet(rows);

    const wb = XLSX.utils.book_new();

    XLSX.utils.book_append_sheet(wb, ws, "Users");

    XLSX.writeFile(wb, "users.xlsx");

}

· 위와 같은 형식이 웹에서 엑셀 파일로 내보내기하는 가장 기본적인 형식입니다. json 형식의 데이터를 엑셀 시트 형식으로 내보내기할 수 있습니다.

· 위 스크립트 예제는 단순 고정 값 형태의 데이터를 내보내기하는 형식이라면, 태그 데이터와 DB 데이터 등 다양한 데이터들을 엑셀 파일로 내보내기할 수 있습니다.


3. [디자인(Design)] 탭으로 돌아가서 내보내기 버튼을 선택한 뒤 속성(Properties) > 스크립트(Script) > OnClick 항목에 미리 작성한 스크립트를 설정한다.

· 해당 객체를 클릭했을 때 미리 작성한 스크립트가 동작하도록 설정

a469539a2db69b09f6a99cdb89b6a1f5_1768264198_7161.png
 


4. 상단 파일(File) > 웹 서비스용 내보내기(Export for Http Service)를 클릭한다.

a469539a2db69b09f6a99cdb89b6a1f5_1768264204_3884.png
 


5. 웹 내보내기 옵션에서 외부 자바스크립트(External JavaScript)에 SheetJS 라이브러리 파일(xlsx.full.min.js)을 설정한 뒤 [확인(OK)]을 눌러 웹 내보내기를 마무리한다.

a469539a2db69b09f6a99cdb89b6a1f5_1768264210_387.png
 


6. 도구모음에서 실행환경 설정(Runtime Setup)을 클릭한다.

a469539a2db69b09f6a99cdb89b6a1f5_1768264216_9579.png
 


7. 실행환경 설정(Runtime Settings) > 웹 서비스(Http Service) > 홈 디렉토리(Home Directory)에 방금 내보내기한 웹 파일을 담고 있는 폴더를 설정한다.

· 자동 시작(Start automatically)을 체크선택하면 X-SCADA AI Viewer 실행시 자동으로 웹 서비스 시작

a469539a2db69b09f6a99cdb89b6a1f5_1768264221_5678.png
 


8. X-SCADA AI Viewer로 프로젝트를 실행한 뒤, 웹 서비스를 시작한다.

· 웹 서버가 미가동 상태라면 서비스(Service) > 웹 서버 시작(Start HttpServer)을 클릭하여 웹서버 실행

a469539a2db69b09f6a99cdb89b6a1f5_1768264226_4659.png
 


9. 웹 브라우저(Chrome, Edge 등)에서 X-SCADA AI 서버로 접속한다.

· 인터넷 주소창에 서버 IP 주소 혹은 localhost 라고 입력하여 접속 가능

a469539a2db69b09f6a99cdb89b6a1f5_1768264235_3658.png
 


10. ANA1, ANA2, ANA3 를 클릭하여 태그 값을 설정한 뒤 [Export Tag Values] 버튼을 클릭하여 엑셀 파일(.xlsx) 파일로 다운로드한다.

a469539a2db69b09f6a99cdb89b6a1f5_1768264245_8761.png
 


11. [Select]를 눌러 데이터베이스에 있는 데이터를 불러온 뒤 [Export DB Data]를 눌러 엑셀 파일(.xlsx)로 다운로드한다.

a469539a2db69b09f6a99cdb89b6a1f5_1768264255_6886.png
 


12. 다운로드한 엑셀 파일을 열어 데이터를 문제없이 내보내기 했는지 확인한다.

a469539a2db69b09f6a99cdb89b6a1f5_1768264261_5954.png
 


13. 첨부한 샘플 파일(.xix)을 다운로드 받아 X-SCADA AI Designer로 실행하여 설정을 살펴볼 수 있습니다.

· 함께 첨부한 xlsx.full.min.js 파일을 활용하여 위 과정을 따라해보면 실제로 엑셀 파일로 내보내기하는 것까지 테스트 가능합니다.


0 Comments