Excel 워크시트에 이미지 삽입

PiTemplate.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

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로 읽기 위함인 것 같습니다.