JavaScript - 차트(chart)를 이미지화 시켜서 Excel 로 내보내기(export)

안녕하세요. 이번 글에서는 차트를 이미지화 시켜서 excel로 export를 해보겠습니다.

 

차트가 있다는 가정하에 진행하겠습니다. 저는 Chart.js 컴포넌트를 이용해서 차트를 만들었습니다.

밑에 사진이 제가 임시로 만든 차트입니다.

 

이 차트를 excel export를 해보겠습니다.

 

먼저 차트를 base64로 인코딩을 해줍니다.

 

1. canvas id를 가지고 옵니다

var canvas1 = document.getElementById('Unit1_Chart');

var canvas2 = document.getElementById('Unit2_Chart');

 

2. base64 인코딩

var dataURL1 = canvas1.toDataURL(1.0);

var dataURL2 = canvas2.toDataURL(1.0);

 

3. ajax로 서버로 보내주기

 

var Ajaxdata = {};

Ajaxdata.Image1 = dataURL1;

Ajaxdata.Image2 = dataURL2;

 

$.ajax({

type: 'POST',

dataType: 'json',

data: JSON.stringify(Ajaxdata),

contentType: 'application/json',

url: '/PostExcelExport',

success: function (data1) {

console.dir(data1);

},

error: function (err) {

alert("실패 : " + err);

}

});

 

4. 서버에서 excel export 해주기

var Excel = require('exceljs');

var workbook = new Excel.Workbook();

 

//exceljs라는 컴포넌트를 이용했습니다.

 

// 프로젝트 안에 임시로 excel 파일을 만들고 불러옵니다.

workbook.xlsx.readFile(__dirname + "/../assets/ExcelFile/test.xlsx")

.then(function () {

 

const imageId1 = workbook.addImage({

base64: myBase64Image1,

extension: 'png',

});

 

const imageId2 = workbook.addImage({

base64: myBase64Image2,

extension: 'png',

});

 

//이미지 영역 지정->크기를 잘못 맞추면 이미지가 틀어지게 나옵니다. 브라우저에 있는 이미지 그대로 가져오기 때문에 //브라우저의 크기에 맞춰 영역을 지정해 주셔야 합니다.

 

worksheet.addImage(imageId1, 'K30:AJ49');

worksheet.addImage(imageId2, 'K55:AJ74');

 

//기존에 불러온 파일을 읽은 다음 새로운 excel을 작성합니다.

return workbook.xlsx.writeFile(__dirname + "/../assets/ExcelFile/TestResult.xlsx");

}).then(function () {

res.send("true");

}).catch(function (error) {

console.dir(error);

res.send(error);

})

 

배경이 흰색인 이유는 제가 미리 영역을 셀 병합 후 배경색을 흰색을 줬습니다.

 

 

부족한 글을 읽어주셔서 감사합니다.