워크시트 배경 이미지

SpreadJS는 워크시트에 배경 이미지를 설정하는 기능을 지원합니다. 이를 통해 시각적 미려함을 향상시키고, 지도나 가이드라인을 겹쳐서 표현하는 등 데이터 시각화를 돕거나, 템플릿 스타일을 통일하여 전문성과 사용자 경험을 균형 있게 유지할 수 있습니다. 이는 보고서, 대시보드와 같은 시나리오에 적합합니다.

코드 사용

Worksheet 클래스의 backgroundImage 함수는 워크시트에 배경 이미지를 설정하는 데 사용할 수 있으며, 매개변수로는 이미지 소스 문자열을 전달합니다:

• 이미지 URL

  • 웹 상의 특정 위치에 있는 이미지를 가리키는 경로입니다.

  • 예시: "https://example.com/path/to/image.jpg"

  • 외부 경로를 사용하는 경우, 서버가 적절한 CORS 헤더를 설정하여 애플리케이션이 리소스에 접근할 수 있도록 구성되어 있어야 합니다.

• Base64 인코딩된 이미지 데이터

  • 이미지를 Base64 형식으로 인코딩하여, HTML 또는 CSS 내에서 Data URL 형태로 직접 삽입할 수 있습니다.

  • 예시: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."

• 상대 경로 이미지

  • API와 이미지 리소스가 동일한 서버에 있을 경우, 상대 경로를 사용하여 이미지에 접근할 수 있습니다.

  • 예시: "/images/background.png"

let workbook = new GC.Spread.Sheets.Workbook("ss");
let worksheet = workbook.getActiveSheet();
worksheet.backgroundImage("https://cdn.mescius.io/umb/media/5lnfh0kr/2023-mescius-home-jumbotron-graphic.png")

배경 이미지 레이아웃

배경 이미지는 항상 원래 크기(original size) 로 렌더링되며, 늘어나거나 축소되지 않습니다. 즉, 워크시트의 실제 크기와 관계없이 배경 이미지는 고유한 너비와 높이를 유지하며,

워크시트 크기에 맞춰 자동으로 조정되지 않습니다.

예를 들어, 배경 이미지가 500x300 픽셀인 경우 워크시트가 이보다 커도 해당 이미지는 늘어나지도 줄어들지도 않고, 원래 크기 그대로 표시됩니다.

배경 이미지 반복

배경 이미지는 워크시트의 실제 크기를 기준으로 x축(가로 방향) 및 y축(세로 방향) 으로 자동 반복되어 워크시트 전체 배경을 채웁니다.

예를 들어, 워크시트가 1900x900 픽셀이고 배경 이미지가 500x300 픽셀인 경우, 해당 이미지는 가로로 4번, 세로로 3번 반복되어 워크시트 전체를 채웁니다.

워크시트 크기를 초과하는 이미지 부분은 자동으로 잘려(clipped) 렌더링됩니다.

배경 이미지 클립

배경 이미지가 워크시트의 실제 표시 영역을 초과하는 경우, x축 또는 y축 방향으로 넘치는 부분은 자동으로 잘립니다.

즉, 배경 이미지는 워크시트의 실제 크기 내에서만 표시되며, 초과된 부분은 화면에 표시되지 않습니다.

예를 들어, 워크시트가 1900x900 픽셀이고 배경 이미지가 2000x1200 픽셀인 경우, 가로로 초과된 100픽셀, 세로로 초과된 300픽셀은 보이지 않으며, 워크시트 크기와 일치하는 부분만 렌더링됩니다.

고정 창 및 스크롤

• 고정 창없이 스크롤:

• 고정 창과 함께 스크롤:

• 오른쪽에서 왼쪽

워크시트 배경 이미지의 레이어 구조

워크시트 배경 이미지는 워크북 위에, 그러나 워크시트의 모든 객체 아래에 렌더링됩니다.

구체적으로, 워크시트 배경 이미지는 다음 요소들 아래에 위치합니다:

1. 셀 배경 색상

2. 셀 테두리

3. 도형(Shapes)

4. 차트(Charts)

5. 기타 워크시트에 추가된 모든 객체

즉, 셀에 어떤 콘텐츠나 객체를 추가하더라도, 이러한 콘텐츠와 객체는 배경 이미지 위에 표시되며, 배경 이미지는 가장 아래의 장식용 요소로만 사용됩니다.

이로 인해 사용자는 셀 내용이나 기타 워크시트 요소를 문제 없이 보고 편집할 수 있습니다.

엑셀 내보내기 및 가져오기 지원

배경 이미지는 Excel 내보내기 및 Excel에서 가져오기를 지원합니다. Excel은 행과 열이 사실상 무제한이지만, SpreadJS는 고정된 행/열 수를 가지므로, 이전에는 데이터가 없는 Excel 파일을 SpreadJS로 가져오면 오직 A1 셀만 표시되는 경우가 있었습니다.

하지만 배경 이미지 지원 기능이 도입된 이후, 빈 Excel 워크시트에 배경 이미지가 포함되어 있는 경우, SpreadJS로 가져왔을 때에는 배경 이미지 전체가 표시되도록 워크시트의 행/열 수를 설정해줘야 합니다.

디자이너에서 워크시트 배경 이미지 설정

디자이너의 페이지 레이아웃(Page Layout) 탭에서 워크시트 배경 이미지를 설정하거나 삭제할 수 있습니다.

var config = GC.Spread.Sheets.Designer.DefaultConfig;
var pageLayout = config.ribbon.filter((item)=>{ return item.id === 'pageLayout'})[0];
var pageSetup = pageLayout.buttonGroups.filter((item)=>{return item.thumbnailClass==='ribbon-thumbnail-page-setup'})[0]
var pageSetupCmdGroup = pageSetup.commandGroup.children[0].children;
pageSetup.commandGroup.children[0].children = pageSetupCmdGroup.map(function(ele){
    if(ele === 'worksheetBackground'){
        return GC.Spread.Sheets.Designer.CommandNames.Background;
    }else if(ele === 'deleteWorksheetBackground'){
        return GC.Spread.Sheets.Designer.CommandNames.DeleteBackground;
    }
    return ele;
});
designer.setConfig(config);