Chrome 확장 프로그램에서 JavaScript를 활용하여 Excel 셀에 이미지 삽입

ExcelJS 및 Axios를 사용하여 Excel 셀에 이미지 포함

이 솔루션은 Excel 통합 문서를 생성하기 위해 Node.js, ExcelJS를 사용하고 이미지 데이터를 가져오기 위해 Axios를 사용합니다. Excel 셀에 이미지를 직접 포함하는 작업을 처리합니다.

const ExcelJS = require('exceljs');
const axios = require('axios');
async function addImageToExcel() {
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('My Sheet');

  const data = [
    { id: 1, imageUrl: 'https://example.com/image1.png' },
    { id: 2, imageUrl: 'https://example.com/image2.png' }
  ];

  worksheet.columns = [
    { header: 'ID', key: 'id', width: 10 },
    { header: 'Image', key: 'image', width: 30 }
  ];

  for (const item of data) {
    const row = worksheet.addRow({ id: item.id });
    row.height = 90;
    const imageId = workbook.addImage({
      buffer: (await axios.get(item.imageUrl, { responseType: 'arraybuffer' })).data,
      extension: 'png'
    });
    worksheet.addImage(imageId, \`B${row.number}:B${row.number}\`);
  }

  await workbook.xlsx.writeFile('ExcelWithImages.xlsx');
  console.log('Excel file with images saved!');
}

addImageToExcel().catch(console.error);

Base64 데이터 및 SheetJS를 사용하여 Excel에 이미지 포함

이 솔루션은 Chrome 확장 환경에서 SheetJS를 사용하여 이미지를 Excel 파일에 삽입하기 전에 이미지를 가져와 base64 형식으로 변환하는 데 중점을 둡니다.

async function getImageBase64(url) {
  const response = await fetch(url);
  const blob = await response.blob();
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result.split(',')[1]);
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });
}

async function addImageToSheetJS() {
  const wb = XLSX.utils.book_new();
  const ws = XLSX.utils.aoa_to_sheet([[ 'ID', 'Image' ]]);

  const imageData = await getImageBase64('https://example.com/image.png');
  ws['!merges'] = [{ s: { c: 1, r: 1 }, e: { c: 1, r: 5 } }];
  ws['B2'] = { t: 's', v: imageData, l: { Target: 'base64 image' } };

  XLSX.utils.book_append_sheet(wb, ws, 'Sheet 1');
  XLSX.writeFile(wb, 'SheetWithImages.xlsx');
}

addImageToSheetJS();

JavaScript를 사용하여 Excel에 이미지를 포함하는 방법에 대한 일반적인 질문

1. Chrome 확장 프로그램 환경에서 이미지를 어떻게 가져올 수 있나요?
2. Chrome 확장 프로그램에서는 다음을 사용할 수 있습니다. fetch() URL에서 이미지를 검색하고 다음을 사용하여 base64로 변환합니다. FileReader 삽입용.
3. 파일 크기가 커지는 것을 방지하려면 이미지 형식을 어떻게 해야 합니까?
4. 사용하는 것이 좋습니다 WebP 또는 JPEG 형식은 더 나은 압축을 제공하고 최종 Excel 파일 크기를 줄입니다.
5. 단일 Excel 파일에 여러 이미지를 포함할 수 있나요?
6. 예, 다음과 같은 라이브러리를 사용합니다. ExcelJS 또는 SheetJS, 이미지 URL 배열을 반복하여 여러 이미지를 서로 다른 셀에 포함할 수 있습니다.
7. Node.js에 이미지를 삽입하는 것과 브라우저에 이미지를 삽입하는 것의 차이점은 무엇인가요?
8. Node.js에서는 다음을 사용할 수 있습니다. axios.get() 이미지 데이터를 가져오려면 브라우저에서 다음을 사용해야 합니다. fetch() CORS 정책을 적절하게 처리합니다.
9. Excel 셀에서 이미지 크기가 올바르게 조정되었는지 어떻게 확인합니까?
10. 사용 row.height 그리고 addImage() 이미지가 포함된 셀의 크기를 제어하여 적절한 표시를 보장하는 기능입니다.

Excel에 이미지 삽입에 대한 최종 생각

다음을 사용하여 Excel 셀에 이미지를 직접 포함 자바스크립트 특히 Chrome 확장 프로그램 환경에서 작업할 때는 ExcelJS와 같은 올바른 도구와 라이브러리가 필요합니다. 이를 통해 더욱 동적이고 시각적으로 풍부한 Excel 파일을 생성할 수 있습니다.

이 방법은 이미지 데이터를 바이너리 형식으로 가져오고 이를 셀에 직접 포함하는 등의 최적화된 기술을 통해 생성된 Excel 파일이 기능적이고 시각적으로 매력적이며 웹 개발 및 그 이상의 다양한 사용 사례를 충족하도록 보장합니다.