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

클립보드 이벤트

SpreadJS는 복사, 잘라내기 및 붙여넣기 동작을 가로채고 사용자 지정할 수 있는 네 가지 클립보드 이벤트를 제공합니다.

이러한 이벤트는 다음과 같은 용도로 사용할 수 있습니다.

  • 붙여넣기 작업 검증 또는 차단

  • 특정 개체 유형(예: 이미지 또는 도형) 제한

  • 잘라내기 작업 감지

  • 원본 시트 및 범위 정보 접근

  • Excel 복사-붙여넣기 워크플로 통합

클립보드 수명 주기

클립보드 작업은 일관된 수명 주기 패턴을 따릅니다.

단계

이벤트

취소 가능

복사 또는 잘라내기 전

ClipboardChanging

예

복사 또는 잘라내기 후

ClipboardChanged

아니요

붙여넣기 전

ClipboardPasting

예

붙여넣기 후

ClipboardPasted

아니요

용도:

  • ClipboardChanging — 복사/잘라내기 동작을 검사하거나 수정

  • ClipboardPasting — 붙여넣기 작업을 검증, 필터링 또는 차단

  • ClipboardChanged — 완료된 복사 작업 추적

  • ClipboardPasted — 데이터가 삽입된 후 처리

취소 가능한 이벤트는 이벤트 인수에 cancel 속성을 제공합니다.

지원되는 클립보드 콘텐츠

클립보드 이벤트는 다음을 지원합니다.

  • 셀 값 및 서식

  • 수식

  • 그림

  • 차트

  • 도형

  • 슬라이서

  • 사용자 지정 움직이는 개체

복사-붙여넣기 작업은 다음을 지원합니다.

  • Excel에서 SpreadJS로

  • 동일 워크시트 내

  • 워크시트 간

현재 SpreadJS에서 Excel로의 잘라내기 또는 복사 작업은 지원되지 않습니다.

기본 클립보드 이벤트 바인딩

다음 예제는 네 가지 클립보드 이벤트를 모두 바인딩하는 방법을 보여줍니다.

// Spread 초기화
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });

// Excel 스타일 복사/붙여넣기 활성화
spread.options.allowCopyPasteExcelStyle = true;

// Clipboard 이벤트 바인딩
spread.bind(GC.Spread.Sheets.Events.ClipboardChanged, function () {
    console.log("ClipboardChanged.");
});

spread.bind(GC.Spread.Sheets.Events.ClipboardChanging, function () {
    console.log("ClipboardChanging");
});

spread.bind(GC.Spread.Sheets.Events.ClipboardPasted, function () {
    console.log("ClipboardPasted");
});

spread.bind(GC.Spread.Sheets.Events.ClipboardPasting, function () {
    console.log("ClipboardPasting");
});

Excel에서 SpreadJS로의 붙여넣기 가로채기

이 시나리오는 Excel에서 SpreadJS로 붙여넣을 때 특정 개체 유형(예: 이미지)의 붙여넣기를 방지하는 방법을 보여줍니다.

Excel의 개체(이미지, 차트, 도형)를 복사할 수 있도록 하려면 다음을 설정합니다.

spread.options.allowCopyPasteExcelStyle = true;

ClipboardPasting 이벤트에서 args.cancel = true를 설정하여 붙여넣기 작업을 취소할 수 있습니다.

다음 예제는 이미지 붙여넣기를 방지합니다.

var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
var activeSheet = spread.getActiveSheet();

spread.options.allowCopyPasteExcelStyle = true;

activeSheet.pictures.add("f2", "Capture.PNG", 100, 60, 200, 100);

spread.bind(GC.Spread.Sheets.Events.ClipboardPasting, (e, args) => {
    if (args.pasteData && args.pasteData.image) {
        args.cancel = true;
    }
});

Excel 개체를 SpreadJS로 복사하는 방법에 대한 자세한 내용은 관련 Excel 통합 문서를 참조하십시오.

내부 복사 및 붙여넣기 작업 가로채기

클립보드 이벤트는 SpreadJS 내부 또는 워크시트 간의 복사 및 붙여넣기 동작을 제어하는 데에도 사용할 수 있습니다.

objects 매개 변수는 다음과 같은 복사된 움직이는 개체에 접근할 수 있도록 제공합니다.

  • 그림

  • 사용자 지정 움직이는 개체

  • 슬라이서

  • 차트

  • 도형

action 매개 변수는 GC.Spread.Sheets.ClipboardActionType 열거형을 사용하여 작업이 copy인지 cut인지 나타냅니다.

다음 예제는:

  • 특정 워크시트에서 복사한 움직이는 개체의 붙여넣기를 방지합니다.

  • 잘라내기 작업 전에 사용자 확인을 요청합니다.

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var activeSheet = spread.getActiveSheet();

spread.options.allowCopyPasteExcelStyle = true;

spread.getSheet(0).pictures.add(
    "f5",
    "https://cdn.pixabay.com/photo/2015/10/01/17/17/car-967387__480.png",
    2,
    2,
    200,
    200
);

spread.bind(GC.Spread.Sheets.Events.ClipboardPasting, (e, args) => {

    // Sheet1에서 복사한 움직이는 개체의 내부 복사/붙여넣기 방지
    if (args.objects && args.objects.length > 0 &&
        args.fromSheet && args.fromSheet.name() === "Sheet1") {
        args.cancel = true;
    }

    // 잘라내기 작업 확인
    else if (args.action === GC.Spread.Sheets.ClipboardActionType.cut) {
        if (!confirm("잘라내기 작업을 수행하려고 합니다.\n계속하시겠습니까?")) {
            args.cancel = true;
        }
    }
});