[SpreadJS] 이미지 삽입

엑셀로 보고서를 만들다 보면 이미지를 넣어야 하는 경우가 있다. 이번 글에서는 SpreadJS 로 웹 화면에 보고서를 만들 때, 이미지를 추가하는 방법에 대해서 정리할 것이다.

---

이미지 삽입

SpreadJS 를 이용해서 시트에 이미지를 삽입 하는 방법은 3가지가 있다. 아래 3가지 방법을 통해 이미지를 시트에 삽입해 보았는데, 도형 기능을 이용해서 이미지를 삽입한 경우 이외에는 엑셀로 내보내 지지 않았다. 포럼에서 왜 그런지 찾아 봤는데 스파크라인과 움직이는 개체에 대한 기능은 SpreadJS 에서만 지원하고 엑셀에서는 지원하지 않는 기능이라 그런 것으로 보인다. (자세한 내용은 아래의 '삽입된 이미지를 포함해서 Excel 내보내기' 항목을 참고)

---

스파크라인

• 특정 셀 안에 이미지를 추가
• setFormula 메서드를 이용해서 IMAGE 수식을 특정 셀에 지정해서 사용
• IMAGE 수식(=IMAGE(URL,mode,height,width,clipX,clipY,,clipWidth,vAlign,hAlign))의 매개 변수를 지정해서 원하는 이미지 추가
  • URL : 삽입될 이미지가 위치한 경로. url 형태 혹은 base64 형태의 내용을 기입. string 타입
  • mode : 이미지 맞춤 모드 (선택 사항)
    • 1 : 계속 배율에 맞춤
    • 2 : 전체 이미지에 맞춤
    • 3 : 원본 크기에 맞춤
    • 4 : 사용자 정의 크기에 맞춤
  • height : (모드가 4인 경우) 이미지의 높이 (선택 사항)
  • width : (모드가 4인 경우) 이미지의 너비 (선택 사항)
  • clipX : 대상 컨텍스트에 그릴 원본 이미지의 하위 직사각형 왼쪽 상단 모서리에 대한 X축 좌표 (선택 사항)
  • clipY : 대상 컨텍스트에 그릴 원본 이미지의 하위 직사각형 왼쪽 상단 모서리에 대한 Y축 좌표 (선택 사항)
  • clipHeight : 대상 컨텍스트에 그릴 원본 이미지의 하위 직사각형 높이 (선택 사항)
  • clipWidth : 대상 컨텍스트에 그릴 원본 이미지의 하위 직사각형 너비 (선택 사항)
  • vAlign : 이미지의 세로 맞춤 (선택 사항)
    • 0 : 위쪽
    • 1 : 가운데
    • 2 : 아래쪽
  • hAlign : 이미지의 가로 맞춤 (선택 사항)
    • 0 : 왼쪽
    • 1 : 가운데
    • 2 : 오른쪽
• 엑셀에서 지원하지 않는 기능 -> 이 기능을 통해 지정된 이미지가 있는 통합문서를 엑셀로 내보내기하면 이미지가 지정되지 않은 상태로 내보내기 됨.

<<코드 예시>>

var img1 = 'data:image/png;base64,iV...';
// 셀 크기 조절
sheet.setColumnWidth(0, 100);
sheet.setRowHeight(0, 100);
// A1 셀에 이미지 삽입
sheet.setFormula(0, 0, '=IMAGE("' + img1 + '",4,100,100)');

[참고 링크 : SpreadJS 스파크라인 이미지 데모]

이미지 | 기능별 학습 | SpreadJS 데모

---

움직이는 개체

• GC.Spread.Sheets.FloatingObjects.FloatingObject 클래스로 움직이는 개체에 대한 객체 생성
• 이미지 태그 요소를 생성하고 해당 요소의 src 속성으로 이미지 지정
• 생성된 이미지 태그 요소를 content메서드를 이용하여 FloatingObject 객체에 지정
• 시트에 FloatingObject 객체 추가
• FloatingObject 생성자 매개변수(new FloatingObject(name, x, y, width, height))
  • name : 개체 이름
  • x : 개체가 지정될 x 좌표
  • y : 개체가 지정될 y 좌표
  • width : 개체의 너비
  • height : 개체의 높이
• sheet.floatingObjects.remove(움직이는 개체 이름) 메서드를 이용해서 움직이는 개체 삭제
• sheet.floatingObjects.zIndex(움직이는 개체 이름, z-index) 메서드
• 엑셀에서 지원하지 않는 기능 -> 이 기능을 통해 지정된 이미지가 있는 통합문서를 엑셀로 내보내기하면 이미지가 지정되지 않은 상태로 내보내기 됨.

<<코드 예시>>

var floatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("test", 0, 120, 100, 100);
var img = document.createElement("img");
img.src = "./image/free-icon-star-1012248.png";
floatingObject.content(img);
sheet.floatingObjects.add(floatingObject);

[참고 링크 : SpreadJS 움직이는 개체 소개 데모] | [참고 링크 : SpreadJS 움직이는 개체 작업 데모]
[참고 링크 : SpreadJS FloatingObject API]

GC.Spread.Sheets.FloatingObjects.FloatingObject | JavaScript Spreadsheet | SpreadJS

작업 | 기능별 학습 | SpreadJS 데모

개요 | 기능별 학습 | SpreadJS 데모

도형

• sheet.shapes.addPictureShape 메서드로 도형을 추가해서 이미지를 삽입
• addPictureShape 메서드 매개변수(addPictureShape(name, src, left?, top?, width?, height?))
  • name : 도형의 이름
  • src : 도형에 추가할 이미지 경로. 경로(절대/상대 경로) 혹은 base64 형태의 내용을 기입. string 타입
  • left : 도형의 x 좌표 (선택 사항)
  • top : 도형의 y 좌표 (선택 사항)
  • width : 도형의 너비 (선택 사항)
  • height : 도형의 높이 (선택 사항)
• pictureFormat 메서드를 이용해서 그림 설정(pictureFormat(IPictureFormat))
• IPictureFormat 옵션
  • blackAndWhite : 흑백 효과 설정
  • brightness : 밝기 설정
  • contrast : 대조 설정
  • crop : 자르기
  • duotone : 이중톤 효과
  • grayscale : 그레이스케일 설정
  • transparency : 투명도 설정
• geometryType 메서드를 이용해 그림의 기하 도형 유형 변경
• style 메서드를 이용해 그림의 테두리 및 배경색 설정

<<코드 예시>>

var pic1 = sheet.shapes.addPictureShape('pic1', img1, 0, 220, 100, 100);

[참고 링크 : SpreadJS 도형 셰이프 유형 그림 셰이프 데모] | [참고 링크 : SpreadJS addPictureShape API]
[참고 링크 : SpreadJS pictureFormat API] | [참고 링크 : SpreadJS IPictureFormat API]
[참고 링크 : SpreadJS geometryType API] | [참고 링크 : SpreadJS style API]

개요 | 기능별 학습 | SpreadJS 데모

GC.Spread.Sheets.Shapes.ShapeCollection | JavaScript Spreadsheet | SpreadJS

GC.Spread.Sheets.Shapes.PictureShape | JavaScript Spreadsheet | SpreadJS

GC.Spread.Sheets.Shapes.IPictureFormat | JavaScript Spreadsheet | SpreadJS

GC.Spread.Sheets.Shapes.PictureShape | JavaScript Spreadsheet | SpreadJS

GC.Spread.Sheets.Shapes.PictureShape | JavaScript Spreadsheet | SpreadJS

---

삽입된 이미지를 포함해서 Excel 내보내기

SpreadJS 에서 삽입한 이미지를 포함하여 Excel 로 내보내려면, 이미지는 도형 기능을 통해 시트에 삽입되어 있어야한다.
스파크라인이나, 움직이는 개체에 대한 기능은 SpreadJS 에서만 지원하고 Excel에서는 지원되지 않는 기능이기 때문이다.
도형 기능을 통해 이미지가 삽입된 통합문서를 Excel 내보내기 하면 이미지가 잘 포함되어서 내보내기 되어진다.
근데 여기서 하나 문제점이 있었다. SpreadJS 에서 1 대 1 비율의 이미지를 넣고 Excel 로 내보내기 했는데, 내보내진 Excel 을 열어보니 삽입된 이미지의 비율이 살짝 안맞아 있었다.

SpreadJS 에 이미지 삽입

 

이미지를 포함해서 내보내진 Excel 파일

이에 대해서 개발자 포럼을 또 한참을 뒤져 보니 아래와 같은 글을 발견했다. 나같은 사람이 또 있던 모양.
[참고 링크 : 그레이프시티 개발자 포럼 Q&A 글]

엑셀 export 이미지 비율 관련 ssjson > Q&A | 토론 | 그레이프시티 개발자 포럼

해서 해결법으로는 아래 코드를 쓰면 된다.

if (spread) {
    spread.sheets.forEach(function (item) {
		// 시트에 적용된 기본 고정 글꼴 지정 및 크기 지정
    	let style = item.getDefaultStyle();
    	style.themeFont = undefined;
    	style.font = "14.6px 맑은 고딕";
    	item.setDefaultStyle(style);
	});
}

 

위 코드를 써서 내보내기 한 Excel을 열어보니 삽입한 이미지 비율이 1 대 1 비율로 잘 들어가 있었다.

---

결론

SpreadJS 에서 이미지를 삽입할 때 쓰는 기능은 세가지가 있다.

• 스파크라인
• 움직이는 개체
• 도형

이미지가 포함된 시트를 Excel 로 내보내기 할 때, 이미지가 삽입된 채로 내보내기 할려면 도형 기능으로 이미지를 넣어야 한다.