FlexGrid 컨트롤을 PDF로 내보내기 위해서는 두 개의 추가 모듈을 어플리케이션에 포함해야 합니다:

• wijmo.pdf.js: PDF 파일을 저장하고 로드하는 일반적인 방법을 제공합니다.
• wijmo.grid.pdf.js: wijmo.pdf.js를 사용하여 FlexGrid 컨트롤을 PDF로 저장하는 FlexGridPdfConverter 클래스를 포함합니다.

FlexGrid를 PDF로 내보내려면,FlexGridPdfConverter.export 메서드를 호출하고 내보낼 그리드에 대한 참조, 파일 이름, 페이지 형식, 머리글과 바닥글, 스타일을 정의하는 추가 옵션을 제공합니다.

<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.20212.808/styles/wijmo.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
    
<script src="https://cdn.grapecity.com/wijmo/5.20212.808/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20212.808/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20212.808/controls/wijmo.pdf.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20212.808/controls/wijmo.grid.pdf.min.js"></script>

2. Wijmo 컨트롤을 DOM 요소에 할당할 'flexgrid'라는 id를 가진 div 요소를 HTML 파일에 생성합니다.

• body 태그 아래에 아래와 같이 export 이벤트를 처리할 버튼 또한 추가하여 주시길 바랍니다.

<!-- Export button -->
<button class="btn btn-default" id="btnExport">Export</button>
<!-- FlexGrid -->
<div id="flexGrid" class="grid"></div>

3. script 태그 안에 그리드에 추가할 랜덤 데이터 함수를 생성합니다.

function getData(count) {
        const countries = [
          "미국",
          "독일",
          "영국",
          "일본",
          "이탈리아",
          "그리스"
        ];
        const products = ["위젯", "가젯", "하키"];
        //
        let data = [];
        for (let i = 0; i < count; i++) {
          let countryId = Math.floor(Math.random() * countries.length),
            productId = Math.floor(Math.random() * products.length);
          let item = {
            id: i,
            country: countries[countryId],
            product: products[productId],
            discount: Math.random() / 4,
            active: i % 4 == 0
          };
          data.push(item);
        }
        return data;
}

4. 그리드의 인스턴스를 생성하고 itemsSource에 데이터를 할당해줍니다.

let flexGrid = new wijmo.grid.FlexGrid("#flexGrid", {
          autoGenerateColumns: false,
          selectionMode: wijmo.grid.SelectionMode.ListBox, //그리드 선택 모드
          headersVisibility: wijmo.grid.HeadersVisibility.All, //헤더 표시
          columns: [ // 그리드 열 설정
            { header: "ID", binding: "id" },
            { header: "Country", binding: "country" },
            { header: "Product", binding: "product" },
            { header: "Discount", binding: "discount", format: "p1" },
            { header: "Active", binding: "active" }
          ],
          itemsSource: getData(10)
        });

• export 함수의 첫 번째 매개변수는 내보낼 FlexGrid 인스턴스, 두 번째 매개변수는 파일 이름, 마지막으로 export 설정입니다.
• 아래 export 설정에서 documentOptions를 통해 header와 footer에 페이지 번호를 지정해 줍니다.

document.querySelector("#btnExport").addEventListener("click", () => {
          wijmo.grid.pdf.FlexGridPdfConverter.export(flexGrid, "FlexGrid.pdf", {
            documentOptions: {
              header: {
                declarative: {
                  text: "\t&[Page]\\&[Pages]"
                }
              },
              footer: {
                declarative: {
                  text: "\t&[Page]\\&[Pages]"
                }
              }
            },
          });
        });
      }

3. 본격적인 한글 폰트 적용을 위해서 우선 문서에 내장된 사용자 정의 폰트의 배열인 embeddedFonts에 PDF에 내장할 폰트에 대해 설정합니다.

• embeddedFonst 내에서는 각각 글씨체 이름, 스타일, 굵기, 글씨체 소스 등을 설정하고 있습니다.
• source에는 아래와 같이 폰트 파일(.ttf)이 위치한 경로를 설정해 주시면 됩니다.

document.querySelector("#btnExport").addEventListener("click", () => {
          wijmo.grid.pdf.FlexGridPdfConverter.export(flexGrid, "FlexGrid.pdf", {
           (..)
            //내장된 폰트 정보
            embeddedFonts: [
              {
                source: "https://assets.codepen.io/975719/BMHANNAPro.ttf",
                name: "BMHANNAPro",
                style: "normal",
                weight: "normal",
                sansSerif: true
              }
            ],
    
          });
        });

document.querySelector("#btnExport").addEventListener("click", () => {
          wijmo.grid.pdf.FlexGridPdfConverter.export(flexGrid, "FlexGrid.pdf", {
           (..)
            //내장된 폰트 정보
            embeddedFonts: [
            (..)
            ],
            styles: {
              cellStyle: {
                backgroundColor: "#ffffff",
                borderColor: "white",
                //font-family 지정
                font: {
                  family: "BMHANNAPro"
                }
              },
              altCellStyle: { //FlexGrid 홀수 행에 적용되는 셀 스타일
                backgroundColor: "#f9f9f9"
              },
              groupCellStyle: { //그룹화된 행에 적용되는 셀 스타일
                backgroundColor: "#dddddd"
              },
              headerCellStyle: { //그룹화된 헤더에 적용되는 셀 스타일
                backgroundColor: "#eaeaea"
                color:"white"
              }
            }
          });
        });
      })