FreeGridv1.15.1English

엑셀: 합계·그룹·메모·그림·보호

엑셀 내보내기 옵션: 합계 행, 그룹마다 개수·집계 행, 행 색상, 셀 메모를 엑셀 메모로, image 컬럼 그림, 암호를 건 읽기 전용 시트.

실행 예제엑셀 옵션

합계·그룹·메모·그림·보호를 넣어 내려받기.

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

export default function mount(ctx: DemoContext) {
  const h = (en: string, ko: string) => tr(ctx.lang, { en, ko });
  const photo = (i: number) => `data:image/svg+xml;utf8,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="12" fill="hsl(${(i * 47) % 360} 70% 55%)"/></svg>`)}`;
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'country', header: h('Country', '국가'), width: 140 },
      { field: 'name', header: h('Name', '이름'), width: 160 },
      { field: 'q1', header: h('Q1', '1분기'), type: 'number', format: '#,##0', aggFunc: 'sum', width: 120 },
      { field: 'logo', header: '', width: 50, image: { width: 20, height: 20 } },
    ],
    data: makeRows(60).map((r, i) => ({ ...r, logo: photo(i) })),
    locale: ctx.lang, getRowId: r => String(r.id), cellNotes: true,
    notes: [{ rowId: '3', colId: 'q1', note: h('Includes a return', '반품 포함') }],
    groupBy: ['country'],
    summary: { rows: [{ label: h('Total', '합계'), columns: { q1: 'sum' } }] },
    rowStyle: ({ row }) => (row.q1 > 90000 ? { background: '#dcfce7' } : null),
  });
  grid.expandAll();
  button(ctx, h('Excel: totals and groups', '엑셀: 합계와 그룹'), () => grid.exportXlsx('groups.xlsx', { summary: true, groups: true }));
  button(ctx, h('Excel: protected (password "demo")', '엑셀: 보호(암호 "demo")'), () => grid.exportXlsx('protected.xlsx', { protect: { password: 'demo' } }));
  button(ctx, h('Excel: with pictures', '엑셀: 그림 포함'), () => grid.exportXlsx('pictures.xlsx', { images: true }));
  text(ctx, h('Notes become Excel comments; green rows keep their colour. (SVG pictures here are kept as addresses: PNG, JPEG and GIF are embedded.)',
    '메모는 엑셀 메모가 되고 초록 행은 색이 유지됩니다. (여기 SVG 그림은 주소로 남고, PNG·JPEG·GIF는 그림으로 들어갑니다.)'));
  return grid;
}

exportXlsx(), getXlsx(), getXlsxSheet()의 아래 옵션은 화면의 더 많은 내용을 파일에 넣습니다. 기본 기능(스타일, 병합, 헤더 고정, 자동 필터, 여러 시트)은 엑셀·PDF 내보내기를 보세요.

grid.exportXlsx('report.xlsx', {
  summary: true,                    // the summary rows at the end
  groups: true,                     // when grouped: a row per group (count, aggregates), then its rows
  notes: true,                      // cell notes as comments (default true)
  protect: { password: 'secret' },  // opens read-only; the password unprotects it
  images: true,                     // pictures of image columns in their cells (fetched first)
});

옵션

이름타입설명
summaryboolean데이터 뒤에 요약 행(굵게, 회색)을 넣습니다. 행 이름과 실제 값을 컬럼 서식으로.
groupsboolean행을 묶었다면 그룹마다 "국가: 한국 (12)"와 컬럼 집계가 든 행을 그 행들 앞에 단계별로 넣습니다. 이 모양에서는 셀 병합을 넣지 않습니다.
notesboolean셀 메모를 엑셀 메모로(기본 true).
protectboolean | { password }시트 보호: 읽기 전용으로 열립니다. 암호를 주면 보호를 풀 때 엑셀이 묻습니다.
imagesbooleanexportXlsx·getXlsxAsync: image 컬럼의 그림을 받아 셀 위에 놓고 행 높이를 맞춥니다. 불러올 수 없는 그림은 주소 글자로 남습니다.

파일의 색

  • rowStyle의 색(배경, 글자색, 굵게)이 행의 모든 셀에 들어갑니다.
  • 조건부 서식과 cellClass 색이 셀마다 그 위에 들어갑니다.
  • styles: false면 값만 씁니다.

그림

const grid = createGrid(el, {
  columns: [{ field: 'name' }, { field: 'photo', image: { width: 40, height: 40 } }],
  data,
});
grid.exportXlsx('people.xlsx', { images: true });            // downloads when the pictures are in
const bytes = await grid.getXlsxAsync({ images: true });     // or the bytes, to upload
  • 다른 사이트의 그림은 그 사이트가 CORS를 허용해야 하고, 아니면 셀에 주소가 남습니다.
  • PNG·JPEG·GIF를 넣고, 같은 주소는 한 번만 받습니다.
  • 동기 함수 getXlsx()는 그림을 받지 않으니 그림은 getXlsxAsync()를 쓰세요.

인쇄와 PDF

인쇄와 PDF에는 summary: false·groups: false가 아니면 요약 행과 그룹 행이 들어가고, rowStyle 색도 그립니다.