프런트엔드 및 백엔드 상호 작용을 통해 Excel 보고서를 만드는 방법

오픈소스 중국 커뮤니티 팀이 공유라는 이름으로 오픈소스 중국 커뮤니티의 뒷이야기를 전하는 첫 생방송을 진행했습니다."

머리말

Excel은 사무 분야에서 가장 광범위한 사용자를 보유하고 있으며 강력한 데이터 처리 및 시각화 기능을 갖춘 대체할 수 없는 도구가 되었습니다. 데이터를 명확하게 표시할 수 있을 뿐만 아니라 데이터 분석, 차트 생성, 데이터 피버팅 등의 작업을 수행하여 사용자에게 포괄적인 데이터 표시 및 분석 기능을 제공합니다.

오늘 편집자는 그레이프시티컴퍼니의 순수 프런트엔드 테이블 컨트롤 SpreadJS와 백엔드 테이블 컴포넌트 GcExcel을 통해 엑셀 보고서 템플릿을 구현하고 데이터를 입력하고 채우는 방법을 소개합니다.

환경 준비

Node.js

SpreadJS 온라인 양식 편집기

코드 파일(이 기사를 읽을 때 참조로 사용할 수 있음)

프런트 엔드

Excel 보고서 템플릿 디자인

1. 보고서 작성을 위한 데이터 소스를 로드합니다.

SpreadJS 온라인 테이블 편집기를 엽니다 . 그룹화된 보고서를 디자인하기 전에 테이블 툴바의 [데이터] 탭에서 [데이터 소스] 버튼을 클릭하여 데이터 소스를 추가해야 합니다.

[테이블 추가] 버튼을 이용하여 각 데이터 소스 개체(각 데이터 소스 개체는 테이블에 해당)를 추가하고, 데이터를 읽을 수 있는 경로를 설정합니다(경로는 해당 형식의 데이터 소스를 요청하는 주소일 수도 있고, 서버가 되십시오. 요청된 주소, 서버는 형식을 준수하는 데이터 소스 개체를 반환합니다.

데이터 경로는 선택 사항입니다. json에 여러 데이터 소스가 포함되어 있는 경우 데이터 경로를 설정하여 구분할 수 있습니다.

2. 보고서 템플릿을 추가합니다.

데이터 소스를 추가한 후, [삽입] 탭의 리포트 버튼을 클릭하면, 아래 그림과 같이 이전에 추가한 데이터 소스 개체가 왼쪽 데이터 소스 목록에 표시됩니다.

3. 그룹화된 보고서를 설정합니다.

왼쪽 데이터 소스 목록의 필드를 드래그하면 아래 그림과 같이 판매 지역, 도, 시, 제품 유형 필드를 그룹화하여 매출 및 수익을 집계하는 보고서 템플릿을 빠르게 구축할 수 있습니다.

4. Excel 템플릿을 sjs 파일로 저장

Excel 보고서 템플릿 수정

Excel 보고서 템플릿을 .sjs 파일로 저장한 후 이제 편집자는 Excel 보고서 템플릿의 일부 셀을 GcExcel 템플릿 언어로 변환해야 합니다.

SpreadJS 프런트엔드 코드의 루트 디렉터리에 .sjs 파일을 배치합니다.

5. Excel 템플릿을 GcExcel 템플릿 구문으로 변환

Excel 보고서 템플릿(아래 그림 참조)의 셀 C4(지방)를 예로 들면, 편집자는 먼저 getBindingPath 메서드를 통해 템플릿 API 정보(아래 그림의 DevTools에 있는 대기열 정보)를 가져옵니다.

API 정보를 얻은 후 바인딩 경로를 구문 분석합니다.

//此为部分代码，完整代码在文末的Gitee链接中
let binding = template.getBindingPath(r, c)  // binding内容如上图
// ... 
// 绑定路径
let path = ""
switch (binding && binding.type) {
    case "Group":
    case "List":
        if (binding.binding) {
            let p = binding.binding.match(/(?<=\[)[^\]\[]*(?=\])/g).join(".")
            path += ds + "." + p // path="销售数据.省份"
        }
        break;
    // ...
}

그런 다음 병합 유형과 확장 방향을 분석합니다.

// Group类型
let group = ""
if (binding && binding.type == "Group") {
    group = "G=M"
} else if (binding && binding.type == "List") {
    group = "G=L"
}
// Expand方向
let expand = ""
if (binding && binding.type != "Summary" && binding.spillDirection == "Vertical") {
   expand = "E=V"
} else if (binding && binding.type != "Summary" && binding.spillDirection == "Horizontal") {
   expand = "E=H"
}

마지막으로 이 정보를 통합하고 이중 중괄호를 추가한 후 내보낸 Excel 파일의 C4 셀 내용은 다음 GcExcel 템플릿 구문이어야 합니다.

{{ds.销售数据.省份(E=V,G=M)}}

6. 프런트 엔드 프로젝트를 실행하고 Excel 템플릿 파일을 내보냅니다.

종속성을 다운로드하려면 [npm install] 명령을 입력하세요.
[npm run start] 명령어를 입력하여 프로젝트를 시작합니다. (시작 후 아래 그림 참조)

마지막으로 수정된 템플릿을 아래 그림과 같이 엑셀 파일로 내보냅니다. 도 단위의 정보가 GcExcel 템플릿 구문으로 수정된 것을 확인할 수 있습니다.

후방

GcExcel 백엔드 코드를 열고 이전에 내보낸 Excel 템플릿 파일을 코드 파일의 루트 디렉터리에 배치합니다. 마지막 기본 기능 실행에서는 데이터를 Excel 템플릿 파일로 전송할 수 있으며 마지막으로 데이터가 포함된 Excel 보고서가 생성됩니다.

결론

이상은 SpreadJS+GcExcel을 사용하여 Excel 보고서를 작성하는 전체 과정입니다. 자세한 내용을 알고 싶으시면 여기를 클릭하여 확인하세요.

확장 링크:

[드라이정보방송] 재무제표분석의 핵심을 기사 하나로 모두 읽어보세요!

재무제표가 좋지 않은 이유는 무엇입니까? 이 4가지 디자인 포인트를 이해하시는 것이 좋습니다!

보고서 분석 분야에서 순수 프런트 엔드 Excel 테이블 제어의 응용 시나리오 분석

프런트엔드 및 백엔드 상호 작용을 통해 Excel 보고서를 만드는 방법

추천