ಎಕ್ಸೆಲ್ ಸೆಲ್‌ಗಳಲ್ಲಿ ಚಿತ್ರಗಳನ್ನು ಸೇರಿಸಲು ಕ್ರೋಮ್ ವಿಸ್ತರಣೆಯಲ್ಲಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸುವುದು

JavaScript ಮತ್ತು SheetJS ನೊಂದಿಗೆ ಎಕ್ಸೆಲ್ ಫೈಲ್‌ಗಳಲ್ಲಿ ಚಿತ್ರಗಳನ್ನು ಎಂಬೆಡಿಂಗ್

Excel (.xlsx) ಫೈಲ್‌ಗಳನ್ನು ಉತ್ಪಾದಿಸುವ Chrome ವಿಸ್ತರಣೆಯನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸುವಾಗ, ಚಿತ್ರಗಳನ್ನು ನೇರವಾಗಿ ಕೋಶಗಳಲ್ಲಿ ಎಂಬೆಡ್ ಮಾಡುವುದು ಒಂದು ಸವಾಲಿನ ಕೆಲಸವಾಗಿದೆ. JavaScript ಮತ್ತು SheetJS ನಂತಹ ಗ್ರಂಥಾಲಯಗಳು ಸ್ಪ್ರೆಡ್‌ಶೀಟ್‌ಗಳನ್ನು ರಚಿಸುವುದು ಮತ್ತು ಸಂಪಾದಿಸುವುದನ್ನು ಸರಳಗೊಳಿಸುತ್ತವೆ, ಎಂಬೆಡೆಡ್ ಚಿತ್ರಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟವಾದ ನಿರ್ವಹಣೆ ಅಗತ್ಯವಿರುತ್ತದೆ.

ಅನೇಕ ಸಂದರ್ಭಗಳಲ್ಲಿ, ಡೆವಲಪರ್‌ಗಳು ಚಿತ್ರಗಳನ್ನು ನೇರವಾಗಿ ಎಂಬೆಡ್ ಮಾಡುವ ಬದಲು ಸೆಲ್‌ಗಳಿಗೆ ಇಮೇಜ್ ಲಿಂಕ್‌ಗಳನ್ನು ಮಾತ್ರ ಸೇರಿಸುವ ಮಿತಿಯನ್ನು ಎದುರಿಸುತ್ತಾರೆ. ಈ ಸಮಸ್ಯೆಯು ಇಮೇಜ್ ಡೇಟಾ ಪರಿವರ್ತನೆ ಮತ್ತು ಎಕ್ಸೆಲ್ ಫೈಲ್ ಫಾರ್ಮ್ಯಾಟಿಂಗ್‌ನಲ್ಲಿ ಒಳಗೊಂಡಿರುವ ಸಂಕೀರ್ಣತೆಗಳಿಂದ ಉಂಟಾಗುತ್ತದೆ, ವಿಶೇಷವಾಗಿ Chrome ವಿಸ್ತರಣೆಗಳಂತಹ ಬ್ರೌಸರ್ ಪರಿಸರದಲ್ಲಿ.

ಈ ಲೇಖನದಲ್ಲಿ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಎಕ್ಸೆಲ್ ಫೈಲ್ ಸೆಲ್‌ಗಳಿಗೆ ನೇರವಾಗಿ ಚಿತ್ರಗಳನ್ನು ಎಂಬೆಡ್ ಮಾಡುವ ಪರಿಹಾರವನ್ನು ನಾವು ಅನ್ವೇಷಿಸುತ್ತೇವೆ. ಚಿತ್ರಗಳನ್ನು HTML ಅಂಶಗಳಿಂದ ಪಡೆಯಲಾಗುತ್ತದೆ ಮತ್ತು ಸೂಕ್ತವಾದ ಎಕ್ಸೆಲ್ ಸೆಲ್‌ಗಳಲ್ಲಿ ಸೇರಿಸಲಾಗುತ್ತದೆ, ತಮ್ಮ ಸ್ಪ್ರೆಡ್‌ಶೀಟ್‌ಗಳಲ್ಲಿ ದೃಶ್ಯ ಡೇಟಾ ಅಗತ್ಯವಿರುವ ಬಳಕೆದಾರರಿಗೆ ಹೆಚ್ಚು ತಡೆರಹಿತ ಅನುಭವವನ್ನು ನೀಡುತ್ತದೆ.

ExcelJS ನಂತಹ ಲೈಬ್ರರಿಗಳನ್ನು ಹೇಗೆ ಸಂಯೋಜಿಸುವುದು ಮತ್ತು ಸಂರಕ್ಷಿತ Chrome ವಿಸ್ತರಣೆ ಪರಿಸರದಲ್ಲಿ ಚಿತ್ರಗಳನ್ನು ಎಂಬೆಡ್ ಮಾಡುವಂತಹ ಸಾಮಾನ್ಯ ಸವಾಲುಗಳನ್ನು ನಿಭಾಯಿಸುವುದು ಹೇಗೆ ಎಂದು ನಾವು ಚರ್ಚಿಸುತ್ತೇವೆ. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಯಶಸ್ವಿ ಅನುಷ್ಠಾನವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು Node.js ಮತ್ತು Chrome ವಿಸ್ತರಣೆ ವಿಧಾನಗಳ ನಡುವಿನ ವ್ಯತ್ಯಾಸಗಳನ್ನು ನಾವು ಪರಿಶೀಲಿಸುತ್ತೇವೆ.

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ಎಕ್ಸೆಲ್ಜೆಎಸ್ ಬಳಸಿ ಎಕ್ಸೆಲ್ ಕೋಶಗಳಲ್ಲಿ ಚಿತ್ರಗಳನ್ನು ಎಂಬೆಡ್ ಮಾಡುವುದು ಹೇಗೆ

ನಾನು ಒದಗಿಸಿದ ಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಎಕ್ಸೆಲ್ ಸೆಲ್‌ಗಳಿಗೆ ನೇರವಾಗಿ ಚಿತ್ರಗಳನ್ನು ಎಂಬೆಡ್ ಮಾಡುವ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸುತ್ತದೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್, ExcelJS, ಮತ್ತು Axios. ಮೊದಲಿಗೆ, ಆಜ್ಞೆಯೊಂದಿಗೆ ExcelJS ಅನ್ನು ಬಳಸಿಕೊಂಡು ಹೊಸ ವರ್ಕ್‌ಬುಕ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸುವ ಮೂಲಕ ಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ ExcelJS.ವರ್ಕ್ಬುಕ್(), ಇದು ಎಕ್ಸೆಲ್ ಫೈಲ್‌ಗಳನ್ನು ಉತ್ಪಾದಿಸಲು ಅಡಿಪಾಯವಾಗಿದೆ. ಅದು ನಂತರ ಕರೆ ಮಾಡುವ ಮೂಲಕ ವರ್ಕ್‌ಶೀಟ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ addWorksheet(). ಈ ವರ್ಕ್‌ಶೀಟ್ ಸೇರಿಸಲಾಗುವ ಎಲ್ಲಾ ಡೇಟಾ ಮತ್ತು ಚಿತ್ರಗಳಿಗೆ ಧಾರಕವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಮಾದರಿ ಡೇಟಾವು ಚಿತ್ರದ URL ಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ, ನಂತರ ಅದನ್ನು ನಿರ್ದಿಷ್ಟ ಸೆಲ್‌ಗಳಲ್ಲಿ ಪಡೆಯಲಾಗುತ್ತದೆ ಮತ್ತು ಎಂಬೆಡ್ ಮಾಡಲಾಗುತ್ತದೆ.

ಚಿತ್ರ ಪಡೆಯುವಿಕೆಯನ್ನು ನಿರ್ವಹಿಸಲು, ಸ್ಕ್ರಿಪ್ಟ್ Axios ಲೈಬ್ರರಿಯನ್ನು ಬಳಸುತ್ತದೆ axios.get() ಅವರ URL ಗಳಿಂದ ಚಿತ್ರಗಳನ್ನು ವಿನಂತಿಸಲು. ಎಕ್ಸೆಲ್ ಫೈಲ್‌ಗೆ ಚಿತ್ರಗಳಂತಹ ಬೈನರಿ ವಿಷಯವನ್ನು ಎಂಬೆಡ್ ಮಾಡಲು ಸೂಕ್ತವಾದ ಪ್ರತಿಕ್ರಿಯೆ ಪ್ರಕಾರ "ಅರೇಬಫರ್" ಅನ್ನು ಬಳಸಿಕೊಂಡು ಆಕ್ಸಿಯೋಸ್ ಚಿತ್ರವನ್ನು ಬೈನರಿ ಡೇಟಾದಂತೆ ಹಿಂಪಡೆಯುತ್ತದೆ. ಡೇಟಾವನ್ನು ಸ್ವೀಕರಿಸಿದ ನಂತರ, ಚಿತ್ರವನ್ನು ಬಫರ್ ಫಾರ್ಮ್ಯಾಟ್‌ಗೆ ಪರಿವರ್ತಿಸಲಾಗುತ್ತದೆ, ಇದು ಸೆಲ್‌ಗೆ ಎಂಬೆಡ್ ಮಾಡಲು ಮಾನ್ಯವಾದ ಚಿತ್ರವೆಂದು ExcelJS ಅನ್ನು ಗುರುತಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಚಿತ್ರವನ್ನು ಪಡೆದುಕೊಂಡು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಿದ ನಂತರ, ಆಜ್ಞೆ workbook.addImage() ವರ್ಕ್‌ಬುಕ್‌ಗೆ ಚಿತ್ರವನ್ನು ಸೇರಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ. ಈ ಹಂತವು ಚಿತ್ರವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ ಮತ್ತು ವರ್ಕ್‌ಶೀಟ್‌ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟ ಸ್ಥಳದಲ್ಲಿ ಇರಿಸಲು ಅದನ್ನು ಸಿದ್ಧಪಡಿಸುತ್ತದೆ. ಇದನ್ನು ಅನುಸರಿಸಿ, worksheet.addImage() ಚಿತ್ರವನ್ನು ಎಲ್ಲಿ ಇರಿಸಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ, ಈ ಸಂದರ್ಭದಲ್ಲಿ ಪ್ರಸ್ತುತ ಸಾಲಿನ "B" ಕಾಲಮ್‌ನಲ್ಲಿ. ಚಿತ್ರವು ಕೋಶದೊಳಗೆ ಚೆನ್ನಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸಾಲಿನ ಎತ್ತರವನ್ನು ಸರಿಹೊಂದಿಸಲಾಗುತ್ತದೆ.

ಅಂತಿಮವಾಗಿ, ಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ವರ್ಕ್‌ಬುಕ್ ಅನ್ನು ಉಳಿಸುತ್ತದೆ workbook.xlsx.writeFile(), ಇದು ಫೈಲ್ ಅನ್ನು ಸ್ಥಳೀಯ ವ್ಯವಸ್ಥೆಗೆ ಬರೆಯುತ್ತದೆ. ಇದು ಪ್ರಕ್ರಿಯೆಯನ್ನು ಪೂರ್ಣಗೊಳಿಸುತ್ತದೆ, ಕೇವಲ ಲಿಂಕ್‌ಗಳ ಬದಲಿಗೆ ನೇರವಾಗಿ ಕೋಶಗಳಲ್ಲಿ ಎಂಬೆಡೆಡ್ ಚಿತ್ರಗಳೊಂದಿಗೆ ಎಕ್ಸೆಲ್ ಫೈಲ್‌ಗೆ ಕಾರಣವಾಗುತ್ತದೆ. ವರದಿಗಳು ಅಥವಾ ಡೇಟಾ ಶೀಟ್‌ಗಳಲ್ಲಿ ಚಿತ್ರಗಳನ್ನು ಸೇರಿಸಬೇಕಾದ ಸಂದರ್ಭಗಳಲ್ಲಿ ಈ ವಿಧಾನವು ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿಯಾಗಿದೆ, ಡೇಟಾ ಮತ್ತು ದೃಶ್ಯ ಅಂಶಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ಎಕ್ಸೆಲ್ ಫೈಲ್‌ಗಳೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸುವ ಬಳಕೆದಾರರಿಗೆ ತಡೆರಹಿತ ಅನುಭವವನ್ನು ನೀಡುತ್ತದೆ.

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);

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();

Chrome ವಿಸ್ತರಣೆಗಳಿಗಾಗಿ ಎಕ್ಸೆಲ್ ಫೈಲ್‌ಗಳಲ್ಲಿ ಇಮೇಜ್ ಎಂಬೆಡಿಂಗ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು

ಅಭಿವೃದ್ಧಿಪಡಿಸುವಾಗ ಎ Chrome ವಿಸ್ತರಣೆ ಎಕ್ಸೆಲ್ ಫೈಲ್‌ಗಳಿಗೆ ಚಿತ್ರಗಳನ್ನು ಸಂಯೋಜಿಸುತ್ತದೆ, ಬ್ರೌಸರ್ ಪರಿಸರದಲ್ಲಿ ಇಮೇಜ್ ಎಂಬೆಡಿಂಗ್ ಅನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸುವುದು ಎಂಬುದು ಒಂದು ಪ್ರಮುಖ ಸವಾಲು. ಸಾಂಪ್ರದಾಯಿಕ Node.js ಪರಿಸರಗಳಿಗಿಂತ ಭಿನ್ನವಾಗಿ, Chrome ವಿಸ್ತರಣೆಗಳು ಹೆಚ್ಚುವರಿ ಭದ್ರತೆ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ನಿರ್ಬಂಧಗಳೊಂದಿಗೆ ಬರುತ್ತವೆ, ಅದು ಕೆಲವು API ಗಳಿಗೆ ನೇರ ಪ್ರವೇಶವನ್ನು ತಡೆಯುತ್ತದೆ. ಇದರರ್ಥ Axios ನಂತಹ ಲೈಬ್ರರಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಚಿತ್ರಗಳನ್ನು ಪಡೆಯುವ ವಿಧಾನಗಳಿಗೆ ಬ್ರೌಸರ್ ನೀತಿಗಳನ್ನು ಅನುಸರಿಸಲು ಪರ್ಯಾಯಗಳು ಬೇಕಾಗಬಹುದು.

ಬ್ರೌಸರ್ ಪರಿಸರಗಳಿಗೆ ಪರಿಹಾರವು ಬಳಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ ಆಧಾರ64 ಕಚ್ಚಾ ಬೈನರಿ ಡೇಟಾದ ಬದಲಿಗೆ ಎನ್ಕೋಡ್ ಮಾಡಿದ ಚಿತ್ರಗಳು. Base64 ಎನ್‌ಕೋಡಿಂಗ್ ಚಿತ್ರಗಳನ್ನು ಸುಲಭವಾಗಿ ವರ್ಗಾಯಿಸಲು ಮತ್ತು ಸ್ಟ್ರಿಂಗ್‌ನಂತೆ ಸಂಗ್ರಹಿಸಲು ಅನುಮತಿಸುತ್ತದೆ, ನಂತರ ಅದನ್ನು SheetJS ನಂತಹ ಲೈಬ್ರರಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು ನೇರವಾಗಿ ಎಕ್ಸೆಲ್ ಶೀಟ್‌ಗೆ ಎಂಬೆಡ್ ಮಾಡಬಹುದು. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ವಿಶೇಷವಾಗಿ ವಿಸ್ತರಣೆಗಳು Node.js-ನಿರ್ದಿಷ್ಟ ಕೋಡ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಸಾಧ್ಯವಿಲ್ಲದ ಕಾರಣ, ಕ್ರೋಮ್ ವಿಧಿಸಿರುವ ಭದ್ರತಾ ಮಿತಿಗಳನ್ನು ಮೀರಲು Bas64 ಎನ್‌ಕೋಡಿಂಗ್ ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಪರಿಗಣಿಸಬೇಕಾದ ಮತ್ತೊಂದು ನಿರ್ಣಾಯಕ ಅಂಶವೆಂದರೆ ಎಕ್ಸೆಲ್ ಫೈಲ್‌ಗಳಲ್ಲಿ ದೊಡ್ಡ ಇಮೇಜ್ ಡೇಟಾ ಸೆಟ್‌ಗಳ ನಿರ್ವಹಣೆ. ಎಕ್ಸೆಲ್ ಶೀಟ್‌ನಲ್ಲಿ ಬಹು ಚಿತ್ರಗಳನ್ನು ಎಂಬೆಡ್ ಮಾಡುವುದರಿಂದ ಫೈಲ್ ಗಾತ್ರವನ್ನು ತೀವ್ರವಾಗಿ ಹೆಚ್ಚಿಸಬಹುದು, ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು, ವಿಶೇಷವಾಗಿ ಬ್ರೌಸರ್ ಆಧಾರಿತ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ. ಇದನ್ನು ಆಪ್ಟಿಮೈಸ್ ಮಾಡಲು, ಡೆವಲಪರ್‌ಗಳು ವೆಬ್‌ಪಿ ಅಥವಾ ಜೆಪಿಇಜಿಯಂತಹ ಸಂಕುಚಿತ ಇಮೇಜ್ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳನ್ನು ಬಳಸಬೇಕು ಮತ್ತು ಫೈಲ್ ಗಾತ್ರವನ್ನು ಕಡಿಮೆಗೊಳಿಸಬೇಕು ಮತ್ತು ಚಿತ್ರದ ಗುಣಮಟ್ಟವು ಹಾಗೇ ಉಳಿಯುತ್ತದೆ.