Inserting an Image into an Excel Worksheet with ExcelJS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36import 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');

  // Insert the image into the Excel worksheet.
  const base64LogoImg = (await base64Img(logoImgURL)) as string;
  const logoImg = workbook.addImage({
    base64: base64LogoImg,
    extension: 'png',
  });
  worksheet.addImage(logoImg, 'B2 : I2'); // Cell range where the image is shown

  const fileName = `LPI_${format(new Date(), 'yyyy-MM-dd')}`;
  download(workbook, fileName); // Errors are handled afterward with then and catch
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20export 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;
  }
}