728x90
반응형
화면의 html을 이미지로 떠서, 엑셀 파일에 넣고 다운로드 받는 방법을 알아보자.
html을 이미지로 바꾸기
html을 이미지로 바꾸려면 먼저 canvas로 바꿔야 한다.
html2canvas 라이브러리를 이용하여 canvas로 바꾸자.
canvas로 바뀐 이미지는 toDataURL을 통해 data URL로 바꿀 수 있다. 이 데이터를 서버에 보내 다운로드 받을 것이다.
const target = document.getElementById('chart');
const canvas = await html2canvas(target);
const src = canvas.toDataURL('image/png');
서버에 이미지 데이터 보내기
서버에 이미지 데이터를 form형태로 보낸다.
// 폼생성
var frm = document.createElement('form');
frm.setAttribute('name', 'excelForm');
//이미지 데이터 넣기
const imgInput = document.createElement('input');
imgInput.setAttribute('name', 'img');
imgInput.value = JSON.stringify(src);
frm.appendChild(imgInput);
$(document.body).append(frm);
frm.action = url;
frm.method = "post";
frm.submit();
$(frm).remove();
엑셀 파일 만들고 이미지 넣기
controller에서 데이터를 받은 후 엑셀 다운로드하는 메소드를 실행시켜준다.
POI라이브러리를 이용해 엑셀 파일을 handling할 수 있다.
여기에서는 엑셀에 이미지를 넣는 방법만 다룰 것이다.
이미지를 넣는 코드는 아래와 같다.
import org.apache.commons.net.util.Base64;
import org.apache.poi.hssf.usermodel.HSSFClientAnchor;
import org.apache.poi.hssf.usermodel.HSSFCreationHelper;
import org.apache.poi.hssf.usermodel.HSSFPatriarch;
import org.apache.poi.hssf.usermodel.HSSFRow;
import org.apache.poi.hssf.usermodel.HSSFSheet;
import org.apache.poi.ss.usermodel.Picture;
import org.apache.poi.ss.usermodel.Workbook;
public class DownloadExcel {
private HSSFWorkbook wb;
//생략...
/**
* 엑셀에 이미지 넣어줌
* @param imgData - data URL 형식의 이미지 데이터
*/
public void setImage(String imgData) {
HSSFSheet sheet = wb.getSheetAt(0); // 0번째 시트를 가져온다.
HSSFCreationHelper helper = this.getHssfWorkboox().getCreationHelper();
HSSFClientAnchor anchor = helper.createClientAnchor(); //size조절
HSSFPatriarch patriarch = sheet.createDrawingPatriarch();
/*이미지 위치*/
anchor.setCol1(1);
anchor.setRow1(1);
/*이미지 그리기*/
int picIdx = handleImage(imgData);
Picture pict = patriarch.createPicture(anchor, picIdx); // 삽입 할 이미지
pict.resize(); // 이미지 사이즈 비율 설정
}
/**
* 이미지 인코딩
* @param imgData - data URL 형식의 이미지 데이터
*/
private Integer handleImage(String imgData) {
String encodingStr = imgData.replace(BASE64_PNG_PRE_FIX, "");
byte[] decodeImg = Base64.decodeBase64(encodingStr.getBytes());
int picIdx = this.getHssfWorkboox().addPicture(decodeImg, Workbook.PICTURE_TYPE_PNG);
return picIdx;
}
}
- 이미지 데이터 (data URL)에서 prefix를 뗀다.
- 1의 데이터를 Base64.decodeBase64로 디코드 한다.
- anchor객체에 이미지 위치를 설정해주고, addPicture을 통해 workbook에 넣는다.
- createPicture을 통해 이미지를 생성한다.
- resize를 통해 이미지의 비율을 설정해준다.
HSSF, XSSF, SXSSF의 차이점
엑셀 파일 확장자에 따라 사용하는 객체가 다르다.
HSSF | .xls 파일 (97~03년) |
XSSF, SXSSF | .xlsx, .xlsx (대용량 처리) |
2022.03.03 - [Spring] - [html2canvas] spring에서 html2canvas proxy 사용하기/ 지도 캡처
2022.06.16 - [java] - [Java] POI 오류, "허용되는 글꼴 수가 초과되어 이 파일에 글꼴 서식이 제대로 적용되지 않을 수 있습니다."
728x90
반응형
'java' 카테고리의 다른 글
[java] FTP file upload시 한글 파일 안올라가는 문제 (0) | 2023.01.12 |
---|---|
[java] Quartz를 이용해 Spring에서 Scheduling하기 (0) | 2023.01.04 |
[eclipse] 이클립스 lombok 적용 안될 때 (0) | 2022.12.06 |
[java] 티베로 실행 안되는 오류 해결 (0) | 2022.10.04 |
[java] eclipse (EgovFramework) 실행 오류 해결 (0) | 2022.10.04 |