[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

슬라이서를 이미지로 내보내기

SpreadJS는 슬라이서를 이미지 소스로 내보내는 기능을 지원합니다. 슬라이서를 추가한 후, slicer.toImageSrc() API를 사용하여 이미지 소스를 가져올 수 있습니다.

참고: toImageSrc() 메서드를 통해 이미지를 내보낼 수 있는 슬라이서는 테이블 슬라이서 와 피벗 테이블 슬라이서 만 가능합니다.

코드 사용

다음 코드는 스프레드시트에 있는 테이블 슬라이서를 이미지 소스로 저장하는 예시입니다.

// 테이블 생성  
datas = [
    ["1", "NewYork", "1968/6/8", "80", "180"],
    ["4", "NewYork", "1972/7/3", "72", "168"],
    ["4", "NewYork", "1964/3/2", "71", "179"],
    ["5", "Washington", "1972/8/8", "80", "171"],
    ["6", "Washington", "1986/2/2", "89", "161"],
    ["7", "Washington", "2012/2/15", "71", "240"]
];
var table = sheet.tables.addFromDataSource("table1", 2, 2, datas);
dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);

// 시트에 슬라이서를 추가하고 슬라이서 인스턴스를 반환
var slicer = sheet.slicers.add("slicer1", table.name(), "Name");

// 슬라이서 속성 변경
slicer.width(200);
slicer.height(200);
slicer.position(new GC.Spread.Sheets.Point(100, 200));
slicer.style(GC.Spread.Sheets.Slicers.SlicerStyles.dark4());

// 슬라이서를 이미지 소스로 가져오기
let slicerImageSrc = sheet.slicers.all()[0].toImageSrc();

Spread 디자이너 사용

Spread 디자이너에서 슬라이서를 선택한 후 “그림으로 저장(Save as Picture)” 옵션을 클릭하여 슬라이서를 이미지로 저장할 수도 있습니다.

다음은 슬라이서를 이미지로 저장하는 단계입니다:

  1. 워크시트를 엽니다.

  2. 데이터를 삽입합니다.

  3. 슬라이서를 삽입합니다.

  4. 슬라이서를 마우스 오른쪽 버튼으로 클릭하고 "그림으로 저장(Save as Picture)" 를 클릭합니다.


    image


  5. 저장할 위치를 선택합니다.

  6. 파일 이름을 지정하고 저장을 클릭합니다.

주의 사항:

  • 슬라이서의 선택된 상태 및 마우스 오버 상태는 이미지로 내보낼 때도 유지됩니다.

  • 현재 내보내는 파일 형식은 PNG이며, 기본적으로 슬라이서 이름이 파일 이름으로 사용됩니다.

  • 여러 슬라이서 객체가 선택된 경우, 모두 함께 내보내지며 기본적으로 파일 이름은 SpreadShapes로 저장됩니다.