ActiveReportsJS: 트러블슈팅

이 페이지에서는 ActiveReportsJS를 사용하면서 발생할 수 있는 가장 일반적인 문제를 나열하고 해결책을 제시합니다.

보고서가 브라우저와 내보낸 PDF 문서에서 다르게 표시됩니다.

적절한 Fonts configuration을 확인합니다.

응용 프로그램이 Bootstrap과 ActiveReportsJS 뷰어를 사용할 때, 보고서 출력이 독립 실행형 디자이너 응용프로그램과 일치하지 않습니다.

Bootstrap은 모든 HTML 요소에 대한 line-height 값을 1.5으로 설정하며, 이는 보고서 출력에 영향을 미칩니다. 이를 수정하는 가장 좋은 방법은 이 값을 normal로 변경하는 것입니다. 이를 달성하는 한 가지 방법은 Bootstrap Theming 기능을 사용하고, 사용자 정의 SCSS 스타일 선언에서 reboot 모듈을 불러오기 전에 line-height-base 변수의 값을 덮어쓰는 것입니다.

$line-height-base: normal;
@import "../node_modules/bootstrap/scss/reboot";

또는 ActiveReportsJS 보고서 뷰어 컴포넌트를 분리하여 Bootstrap 스타일에 의해 전혀 변경되지 않도록 할 수 있습니다. 하지만 이를 달성하기 위한 구체적인 방법은 응용 프로그램의 아키텍처에 따라 달라집니다.

데이터 요청은 디자인 탭에서는 잘 동작하지만, 독립 실행형 디자이너 응용 프로그램의 미리보기 탭에서는 실패합니다.

만약 디자인 탭에서 데이터 집합을 생성하고 유효성 검사할 수 있으나, 미리보기 탭에서 Data processing error가 발생한다면, 엔드포인트가 CORS 요청을 허용하는지 확인합니다.

독립 실행형 디자이너 응용 프로그램에서 데이터 요청을 디버깅하려면 어떻게 해야 하나요?

독립 실행형 디자이너 응용 프로그램의 폴더에 config.json이라는 파일을 생성합니다.

• Windows : %AppData%\ActiveReportsJS Designer

• MacOS: ~/Library/Application Support/ActiveReportsJS Designer

• Linux: ~/.config/ActivereportsJS Designer

해당 파일에 다음 내용을 추가합니다.

{
  "debug":true
}

독립 실행형 디자이너 응용 프로그램을 재시작하고, Windows의 경우 Ctrl + Shfit + F12 단축키를 사용하고 Mac의 경우 ⌘ + Shift + F12 (또는, 키보드가 기본 function 키를 사용하지 않을 경우, ⌘ + fn+ Shift + F12)를 사용하여 개발자 도구를 엽니다. 데이터 요청을 모니터링하기 위해 Network 탭을 사용합니다.

도넛 차트 데모 보고서의 데이터 요청 디버깅 스크린샷은 다음과 같습니다.