FreeGridv1.15.1English

엑셀·PDF 내보내기

exportXlsx로 서식·색·병합 헤더가 살아 있는 엑셀 파일을, exportWorkbook으로 여러 그리드를 한 파일에, exportPdf로 인쇄 모양 그대로 PDF를 만듭니다.

실행 예제엑셀·PDF 내보내기

서식과 색이 살아 있는 엑셀 파일, 그리드마다 시트 하나, 브라우저에서 만드는 PDF.

이 데모의 코드
import { createGrid, exportWorkbook, type ColumnDef } from '@freegridjs/core';
import { makeRows } from '../data';
import { button, separator, text, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const h = (en: string, ko: string) => tr(lang, { en, ko });
  const columns: ColumnDef[] = [
    { field: 'id', header: 'ID', type: 'number', width: 80 },
    { field: 'name', header: h('Name', '이름'), width: 160, align: 'center' },
    { field: 'country', header: h('Country', '국가'), width: 140, filter: 'set' },
    { header: h('Revenue', '매출'), children: [
      // low values are red; the colour and the right alignment also go into the Excel file
      { field: 'q1', header: h('Q1', '1분기'), type: 'number', format: '#,##0', width: 110,
        cellClass: ({ value }) => (Number(value) < 20000 ? 'demo-low' : undefined) },
      { field: 'q2', header: h('Q2', '2분기'), type: 'number', format: '#,##0', width: 110 },
    ] },
    { field: 'growth', header: h('Growth', '성장률'), type: 'number', format: '0.0%', width: 100 },
    { field: 'joined', header: h('Joined', '가입일'), type: 'date', width: 120 },
  ];
  const grid = createGrid(ctx.host, { columns, data: makeRows(300), locale: lang, theme: 'classic', rowSelection: 'multiple' });

  text(ctx, h('Sort or filter first: the files hold what you see. Check a few rows for the second sheet.',
    '먼저 정렬하거나 필터를 걸어 보세요. 파일에는 보이는 그대로 들어갑니다. 몇 행을 체크하면 두 번째 시트에 들어갑니다.'));
  separator(ctx);
  button(ctx, h('Export Excel', '엑셀로 내보내기'), () => grid.exportXlsx(h('freegrid-demo.xlsx', 'freegrid-데모.xlsx')));
  button(ctx, h('Excel without styles', '스타일 없이 엑셀로'), () => grid.exportXlsx('plain.xlsx', { styles: false }));
  button(ctx, h('Checked rows only', '체크한 행만'), () => grid.exportXlsx('selected.xlsx', { rows: 'selected' }));
  // one file, two sheets: the filtered view and the checked rows
  button(ctx, h('Excel with two sheets', '시트 두 개짜리 엑셀'), () => exportWorkbook(h('two-sheets.xlsx', '시트2개.xlsx'), [
    { grid, sheetName: h('Filtered', '필터 결과') },
    { grid, sheetName: h('Checked', '체크한 행'), options: { rows: 'selected' } },
  ]));
  separator(ctx);
  button(ctx, h('Save as PDF', 'PDF로 저장'), () => {
    grid.exportPdf(h('people.pdf', '사람목록.pdf'), { title: h('People', '사람 목록'), subtitle: h('Current sort and filters', '지금 정렬·필터 그대로'), repeatRows: 0 });
    ctx.log('exportPdf');
  });
  return grid;
}

exportXlsx()는 행을 진짜 엑셀 파일로 저장합니다. 별도 라이브러리 없이 브라우저에서 만듭니다. 숫자는 컬럼 서식을 유지한 숫자로(type: 'number'가 없는 컬럼도 값이 숫자면 숫자 셀이 되고, '007' 같은 문자열은 문자열로 남습니다), 날짜는 날짜로 들어가며, 다단 헤더는 병합된 헤더 행이 되고, 병합된 셀은 병합된 채로 들어가며, 머리글에는 틀 고정과 필터 단추가 붙습니다. 컬럼의 align, cellClass로 준 글자색·배경색·굵게, 조건부 서식도 함께 들어가고, 원하지 않으면 styles: false를 주세요. 기본으로는 지금 보이는 정렬, 필터, 컬럼 그대로 담깁니다.

// a real .xlsx: numbers, dates, formats, merged column-group headers, frozen header
grid.exportXlsx('orders.xlsx');
grid.exportXlsx('picked.xlsx', { columns: ['name', 'total'], rows: 'selected', sheetName: 'Picked' });
grid.exportXlsx('plain.xlsx', { styles: false });        // without align and cellClass colours

// rows to repeat on every printed page (print titles)
grid.exportXlsx('sales.xlsx', { repeatRows: 1 });        // the header rows + the first row

// the bytes instead of a download
const bytes = grid.getXlsx({ rows: 'all' });             // Uint8Array

긴 시트는 그리드 인쇄처럼 인쇄할 때 페이지마다 헤더 행이 반복됩니다(인쇄 제목). repeatRows를 주면 전년 합계 같은 앞쪽 행도 반복되고, repeatHeader: false로 끌 수 있습니다.

엑셀 파일에도 합계 행(summary: true)과, 행을 묶었을 때 그룹마다 개수·집계가 든 행(groups: true)을 넣을 수 있습니다. 인쇄와 PDF에는 끄지 않는 한 둘 다 들어갑니다. rowStyle의 행 색은 셀 배경으로 저장됩니다.

여러 그리드를 한 통합 문서에

exportWorkbook()은 여러 그리드를 시트마다 하나씩 한 .xlsx 파일에 담고, 시트마다 옵션을 따로 줄 수 있습니다. buildWorkbook()은 바이트로 돌려줍니다. 같은 그리드를 두 번 넣어, 한 시트는 필터 결과로 다른 시트는 체크한 행만 담을 수도 있습니다.

import { exportWorkbook, buildWorkbook } from '@freegridjs/core';

// one file, a sheet per grid
exportWorkbook('report.xlsx', [
  { grid: orders, sheetName: 'Orders' },
  { grid: customers, sheetName: 'Customers', options: { rows: 'all' } },
]);
const bytes = buildWorkbook([{ grid: orders, sheetName: 'Orders' }]);   // Uint8Array

PDF 파일

exportPdf()는 인쇄 모양 그대로 브라우저에서 PDF를 만들어 저장합니다. 제목, 용지, 반복되는 헤더 행, 페이지 번호가 같고, getPdf()는 서버에 올리거나 메일에 첨부할 바이트를 돌려줍니다. 페이지마다 화면과 같은 방식으로 그리기 때문에 한글·일본어·중국어 등 어떤 글자든 화면과 똑같이 나옵니다. 대신 PDF 안의 글자는 선택하거나 검색할 수 없습니다. 선명도는 resolution(기본 2), 파일 크기는 quality로 조절합니다. 인쇄와 마찬가지로 최대 maxRows행(기본 1,000행)까지 담습니다.

grid.exportPdf('sales.pdf', { title: 'Sales, first half of 2026', repeatRows: 1 });

// or the bytes, to upload or attach to an email
const bytes = grid.getPdf({ paper: 'A3', resolution: 3 });   // Uint8Array (null without a canvas)
await fetch('/api/reports', { method: 'POST', body: bytes, headers: { 'Content-Type': 'application/pdf' } });

시트 보호, 그림, 메모

엑셀 파일을 보호하고, 그림 컬럼의 그림을 넣고, 셀 메모를 엑셀 메모로 내보낼 수 있습니다. 자세한 내용:

엑셀 옵션

이름타입설명
columnsstring[]순서대로 컬럼 ID(숨긴 컬럼도 가능). 기본: 화면에 보이는 컬럼.
rows'filtered' | 'all' | 'selected''filtered'(기본, 지금 정렬·필터), 'all'(원본 순서), 'selected'(체크한 행).
headers / sheetNameboolean / string헤더 행 포함(기본 true), 시트 이름.
protect / notes / imagesboolean | { password } / boolean / boolean읽기 전용 시트(보호 해제 암호), 셀 메모를 엑셀 메모로(기본 true), image 컬럼 그림(exportXlsx, getXlsxAsync).
summary / groupsboolean합계 행을 넣고, 행을 묶었을 때 그룹마다 개수·집계 행을 넣습니다.
stylesboolean컬럼 정렬과 cellClass의 글자색·배경색·굵게를 파일에 넣습니다(기본 true).
repeatHeader / repeatRowsboolean / number인쇄 제목: 인쇄할 때 페이지마다 헤더 행(기본 true)과 앞쪽 n행을 반복합니다.
getXlsx(options?) / getXlsxSheet(options?)Uint8Array / XlsxSheet파일 바이트, 또는 buildWorkbook / exportWorkbook에 넣을 시트 하나.

PDF는 인쇄 옵션에 resolution과 quality를 더해 받습니다. CSV와 JSON 내보내기는 무료입니다. CSV·JSON 내보내기와 가져오기를 보세요.

이 페이지에 대한 질문

엑셀로 내보낼 수 있나요?

네. exportXlsx가 숫자 서식, 날짜, 병합 헤더, 색이 들어간 진짜 .xlsx 파일을 브라우저에서 만들고, exportWorkbook은 여러 그리드를 한 파일에 담습니다.

PDF로 내보낼 수 있나요?

네. grid.exportPdf("파일.pdf", 옵션)이 인쇄 모양 그대로 브라우저에서 PDF를 만들며 한글도 그대로 나옵니다. getPdf()는 바이트를 돌려줍니다.