Excel 워크시트에 이미지 삽입
PiTemplate.ts
ts
import ExcelJS from 'exceljs';
import { PiType } from '../types/pi';
import { format } from 'date-fns';
import base64Img from '../../actions/utils/base64Img';
import logoImgURL from '../../assets/images/common/ExcelLogoImg.png';
export default async function piTemplate(piDetail: PiType, language: string) {
const download = async (workbook: ExcelJS.Workbook, fileName: string) => {
const buffer = await workbook.xlsx.writeBuffer();
const blob = new Blob([buffer], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
});
const url = window.URL.createObjectURL(blob);
const anchor = document.createElement('a');
anchor.href = url;
anchor.download = fileName + '.xlsx';
anchor.click();
window.URL.revokeObjectURL(url);
};
const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('Sheet');
worksheet.mergeCells('B2 : I2');
// 이미지를 Excel 워크시트에 삽입합니다.
const base64LogoImg = (await base64Img(logoImgURL)) as string;
const logoImg = workbook.addImage({
base64: base64LogoImg,
extension: 'png',
});
worksheet.addImage(logoImg, 'B2 : I2'); // 이미지가 표시될 셀 범위
const fileName = `LPI_${format(new Date(), 'yyyy-MM-dd')}`;
download(workbook, fileName); // 이후 then과 catch를 통해서 에러 핸들링
}Util / base64Img.ts
ts
export default async function base64Img(imgSrc: string) {
try {
const data = await fetch(imgSrc);
const blob = await data.blob();
const reader = new FileReader();
return new Promise((resolve, reject) => {
reader.readAsDataURL(blob);
reader.onload = () => {
const base64data = reader.result;
resolve(base64data);
};
});
} catch (error) {
console.error('이미지 로드 중 오류 발생:', error);
throw error;
}
}fetch(imgSrc)를 사용하여 이미지를 가져옵니다.
가져온 이미지를 data에 담고 data.blob()을 통해서 blob데이터로 만듭니다.
blob 데이터로 만드는 이유는 FileReader로 읽기 위함인 것 같습니다.
- #Excel
- #exceljs