DotNetNote: JSZip 설치 및 _Layout.cshtml 적용 가이드

• 8/25/2025
• 2 minutes to read

개요

DotNetNote 프로젝트에서 Kendo UI의 Excel Export 기능을 사용하려면 JSZip 라이브러리가 필요합니다. 본 문서에서는 JSZip을 최신 버전으로 설치하고, 프로젝트 레이아웃에 적용하는 절차를 설명합니다.

1. LibMan을 이용한 JSZip 설치

ASP.NET Core에서는 Library Manager(LibMan)를 사용하여 클라이언트 라이브러리를 관리할 수 있습니다.

그림: 클라이언트 쪽 라이브러리 관리

1.1 libman.json 설정

프로젝트 루트의 libman.json 파일에 다음 항목을 추가합니다.

{
  "version": "3.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "jszip@3.10.1",
      "destination": "wwwroot/lib/jszip/",
      "files": [
        "jszip.min.js",
        "jszip.js"
      ]
    }
  ]
}

1.2 복원 실행

Visual Studio에서 프로젝트 우클릭 → Restore Client-Side Libraries 메뉴를 실행하거나, CLI에서 다음 명령어를 실행합니다.

libman restore

복원이 완료되면 wwwroot/lib/jszip/ 경로에 jszip.min.js와 jszip.js 파일이 생성됩니다.

2. _Layout.cshtml에 JSZip 추가

Kendo UI의 Excel Export 기능은 JSZip을 필요로 하므로, Kendo 스크립트보다 먼저 JSZip을 로드해야 합니다.

Views/Shared/_Layout.cshtml 파일의 </body> 직전에 다음 코드를 추가합니다.

<!-- JSZip: Excel Export 기능을 위해 Kendo UI보다 먼저 로드 -->
<script src="~/lib/jszip/jszip.min.js"></script>
<script src="~/lib/kendo/js/kendo.all.min.js"></script>

3. 적용 확인

1. 브라우저 개발자 콘솔에서 typeof JSZip을 입력하여 "function"이 출력되면 정상적으로 로드된 것입니다.
2. Kendo Grid에서 Excel Export 버튼을 클릭했을 때 .xlsx 파일이 정상적으로 다운로드되면 적용이 완료된 것입니다.

마무리

본 문서에서는 DotNetNote 프로젝트에 JSZip을 설치하고 _Layout.cshtml에 적용하는 방법을 설명했습니다. LibMan을 활용하여 JSZip을 관리하면 최신 버전을 손쉽게 적용하고 유지보수할 수 있습니다.