Excel സെല്ലുകളിലേക്ക് ചിത്രങ്ങൾ ചേർക്കുന്നതിന് Chrome വിപുലീകരണത്തിൽ JavaScript ഉപയോഗിക്കുന്നത്

JavaScript, SheetJS എന്നിവ ഉപയോഗിച്ച് Excel ഫയലുകളിൽ ഇമേജുകൾ ഉൾച്ചേർക്കുന്നു

Excel (.xlsx) ഫയലുകൾ സൃഷ്ടിക്കുന്ന ഒരു Chrome വിപുലീകരണം വികസിപ്പിക്കുമ്പോൾ, ചിത്രങ്ങൾ നേരിട്ട് സെല്ലുകളിലേക്ക് ഉൾച്ചേർക്കുന്നത് ഒരു വെല്ലുവിളി നിറഞ്ഞ കാര്യമാണ്. JavaScript ഉം SheetJS പോലുള്ള ലൈബ്രറികളും സ്‌പ്രെഡ്‌ഷീറ്റുകൾ സൃഷ്‌ടിക്കുന്നതും എഡിറ്റുചെയ്യുന്നതും ലളിതമാക്കുമ്പോൾ, എംബഡഡ് ഇമേജുകൾ കൈകാര്യം ചെയ്യുന്നതിന് കൂടുതൽ പ്രത്യേകമായ കൈകാര്യം ചെയ്യൽ ആവശ്യമാണ്.

മിക്ക കേസുകളിലും, ചിത്രങ്ങൾ നേരിട്ട് ഉൾച്ചേർക്കുന്നതിനു പകരം സെല്ലുകളിലേക്ക് ഇമേജ് ലിങ്കുകൾ ചേർക്കാൻ മാത്രമേ കഴിയൂ എന്ന പരിമിതി ഡെവലപ്പർമാർ നേരിടുന്നു. ഇമേജ് ഡാറ്റ പരിവർത്തനം, Excel ഫയൽ ഫോർമാറ്റിംഗ് എന്നിവയിൽ ഉൾപ്പെട്ടിരിക്കുന്ന സങ്കീർണ്ണതകളിൽ നിന്നാണ് ഈ പ്രശ്നം ഉണ്ടാകുന്നത്, പ്രത്യേകിച്ച് Chrome എക്സ്റ്റൻഷനുകൾ പോലെയുള്ള ബ്രൗസർ പരിതസ്ഥിതിയിൽ.

ഈ ലേഖനത്തിൽ, JavaScript ഉപയോഗിച്ച് Excel ഫയൽ സെല്ലുകളിലേക്ക് നേരിട്ട് ചിത്രങ്ങൾ ഉൾച്ചേർക്കുന്നതിനുള്ള ഒരു പരിഹാരം ഞങ്ങൾ പര്യവേക്ഷണം ചെയ്യും. ചിത്രങ്ങൾ HTML ഘടകങ്ങളിൽ നിന്ന് ലഭ്യമാക്കുകയും ഉചിതമായ Excel സെല്ലുകളിൽ ചേർക്കുകയും ചെയ്യും, സ്‌പ്രെഡ്‌ഷീറ്റുകളിൽ വിഷ്വൽ ഡാറ്റ ആവശ്യമുള്ള ഉപയോക്താക്കൾക്ക് കൂടുതൽ തടസ്സമില്ലാത്ത അനുഭവം വാഗ്ദാനം ചെയ്യുന്നു.

ExcelJS പോലുള്ള ലൈബ്രറികൾ എങ്ങനെ സംയോജിപ്പിക്കാമെന്നും പരിരക്ഷിത Chrome വിപുലീകരണ പരിതസ്ഥിതിയിൽ ഇമേജുകൾ ഉൾച്ചേർക്കുന്നത് പോലെയുള്ള പൊതുവായ വെല്ലുവിളികൾ എങ്ങനെ കൈകാര്യം ചെയ്യാമെന്നും ഞങ്ങൾ ചർച്ച ചെയ്യും. കൂടാതെ, വിജയകരമായി നടപ്പിലാക്കുന്നത് ഉറപ്പാക്കാൻ Node.js-ഉം Chrome വിപുലീകരണ സമീപനങ്ങളും തമ്മിലുള്ള വ്യത്യാസങ്ങൾ ഞങ്ങൾ അവലോകനം ചെയ്യും.

JavaScript, ExcelJS എന്നിവ ഉപയോഗിച്ച് Excel സെല്ലുകളിലേക്ക് ചിത്രങ്ങൾ എങ്ങനെ ഉൾച്ചേർക്കാം

ഞാൻ നൽകിയ സ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് Excel സെല്ലുകളിലേക്ക് നേരിട്ട് ഇമേജുകൾ ഉൾച്ചേർക്കുന്നതിനുള്ള പ്രശ്നം പരിഹരിക്കുന്നു ജാവാസ്ക്രിപ്റ്റ്, ExcelJS, Axios. ആദ്യം, കമാൻഡ് ഉപയോഗിച്ച് ExcelJS ഉപയോഗിച്ച് ഒരു പുതിയ വർക്ക്ബുക്ക് ആരംഭിക്കുന്നതിലൂടെ സ്ക്രിപ്റ്റ് ആരംഭിക്കുന്നു ExcelJS.വർക്ക്ബുക്ക്(), എക്സൽ ഫയലുകൾ സൃഷ്ടിക്കുന്നതിനുള്ള അടിത്തറയാണിത്. അത് പിന്നീട് വിളിച്ച് ഒരു വർക്ക്ഷീറ്റ് സൃഷ്ടിക്കുന്നു addWorksheet(). ഈ വർക്ക്ഷീറ്റ് ചേർക്കുന്ന എല്ലാ ഡാറ്റയുടെയും ചിത്രങ്ങളുടെയും കണ്ടെയ്നറായി പ്രവർത്തിക്കുന്നു. സാമ്പിൾ ഡാറ്റയിൽ ഇമേജ് URL-കൾ ഉൾപ്പെടുന്നു, അവ പിന്നീട് എടുത്ത് പ്രത്യേക സെല്ലുകളിൽ ഉൾപ്പെടുത്തും.

ഇമേജ് എടുക്കൽ കൈകാര്യം ചെയ്യാൻ, സ്ക്രിപ്റ്റ് Axios ലൈബ്രറി ഉപയോഗിക്കുന്നു axios.get() അവരുടെ URL-കളിൽ നിന്ന് ചിത്രങ്ങൾ അഭ്യർത്ഥിക്കാൻ. എക്സൽ ഫയലിൽ ഇമേജുകൾ പോലുള്ള ബൈനറി ഉള്ളടക്കം ഉൾച്ചേർക്കുന്നതിന് അനുയോജ്യമായ പ്രതികരണ തരം "അറേബഫർ" ഉപയോഗിച്ച് Axios ചിത്രം ബൈനറി ഡാറ്റയായി വീണ്ടെടുക്കുന്നു. ഡാറ്റ ലഭിച്ച ശേഷം, ചിത്രം ഒരു ബഫർ ഫോർമാറ്റിലേക്ക് പരിവർത്തനം ചെയ്യപ്പെടുന്നു, ഇത് ഒരു സെല്ലിലേക്ക് ഉൾച്ചേർക്കുന്നതിനുള്ള സാധുവായ ചിത്രമായി അതിനെ തിരിച്ചറിയാൻ ExcelJS-നെ അനുവദിക്കുന്നു.

ചിത്രം ലഭ്യമാക്കി പ്രോസസ്സ് ചെയ്തുകഴിഞ്ഞാൽ, കമാൻഡ് workbook.addImage() വർക്ക്ബുക്കിലേക്ക് ചിത്രം ചേർക്കാൻ ഉപയോഗിക്കുന്നു. ഈ ഘട്ടം ചിത്രം നിർവചിക്കുകയും വർക്ക് ഷീറ്റിനുള്ളിൽ ഒരു പ്രത്യേക സ്ഥലത്ത് സ്ഥാപിക്കാൻ തയ്യാറാക്കുകയും ചെയ്യുന്നു. ഇതിനെ തുടർന്ന്, worksheet.addImage() ചിത്രം എവിടെ സ്ഥാപിക്കണമെന്ന് വ്യക്തമാക്കുന്നു, ഈ സാഹചര്യത്തിൽ നിലവിലെ വരിയുടെ "B" നിരയിൽ. ചിത്രം സെല്ലിനുള്ളിൽ നന്നായി യോജിക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ വരിയുടെ ഉയരം ക്രമീകരിച്ചിരിക്കുന്നു.

അവസാനമായി, സ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് വർക്ക്ബുക്ക് സംരക്ഷിക്കുന്നു workbook.xlsx.writeFile(), ഇത് ലോക്കൽ സിസ്റ്റത്തിലേക്ക് ഫയൽ എഴുതുന്നു. ഇത് പ്രക്രിയ പൂർത്തീകരിക്കുന്നു, അതിൻ്റെ ഫലമായി വെറും ലിങ്കുകൾക്ക് പകരം സെല്ലുകളിൽ നേരിട്ട് ഉൾച്ചേർത്ത ചിത്രങ്ങളുള്ള ഒരു Excel ഫയൽ ലഭിക്കും. റിപ്പോർട്ടുകളിലോ ഡാറ്റാ ഷീറ്റുകളിലോ ചിത്രങ്ങൾ ഉൾപ്പെടുത്തേണ്ട സന്ദർഭങ്ങളിൽ ഈ രീതി വളരെ ഫലപ്രദമാണ്, ഇത് ഡാറ്റയും വിഷ്വൽ ഘടകങ്ങളും ഉൾക്കൊള്ളുന്ന 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);

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 വിപുലീകരണങ്ങൾക്കായി Excel ഫയലുകളിൽ ഇമേജ് ഉൾച്ചേർക്കൽ ഒപ്റ്റിമൈസ് ചെയ്യുന്നു

വികസിപ്പിക്കുമ്പോൾ എ Chrome വിപുലീകരണം Excel ഫയലുകളിലേക്ക് ഇമേജുകൾ സംയോജിപ്പിക്കുന്നത്, ഒരു ബ്രൗസർ പരിതസ്ഥിതിയിൽ ഇമേജ് എംബെഡിംഗ് എങ്ങനെ കൈകാര്യം ചെയ്യാം എന്നതാണ് ഒരു പ്രധാന വെല്ലുവിളി. പരമ്പരാഗത Node.js പരിതസ്ഥിതികളിൽ നിന്ന് വ്യത്യസ്തമായി, ചില API-കളിലേക്കുള്ള നേരിട്ടുള്ള ആക്‌സസ് തടയുന്ന അധിക സുരക്ഷയും പ്രകടന നിയന്ത്രണങ്ങളുമായാണ് Chrome വിപുലീകരണങ്ങൾ വരുന്നത്. ഇതിനർത്ഥം Axios പോലുള്ള ലൈബ്രറികൾ ഉപയോഗിച്ച് ഇമേജുകൾ ലഭ്യമാക്കുന്നത് പോലുള്ള രീതികൾക്ക് ബ്രൗസർ നയങ്ങൾ പാലിക്കുന്നതിന് ഇതരമാർഗങ്ങൾ ആവശ്യമായി വന്നേക്കാം.

ബ്രൗസർ പരിതസ്ഥിതികൾക്കുള്ള ഒരു പരിഹാരം ഉപയോഗിക്കുന്നത് ഉൾപ്പെട്ടേക്കാം അടിസ്ഥാനം64 റോ ബൈനറി ഡാറ്റയ്ക്ക് പകരം എൻകോഡ് ചെയ്ത ചിത്രങ്ങൾ. Base64 എൻകോഡിംഗ് ഇമേജുകൾ എളുപ്പത്തിൽ കൈമാറ്റം ചെയ്യാനും ഒരു സ്ട്രിംഗായി സംഭരിക്കാനും അനുവദിക്കുന്നു, തുടർന്ന് ഷീറ്റ്ജെഎസ് പോലുള്ള ലൈബ്രറികൾ ഉപയോഗിച്ച് ഒരു Excel ഷീറ്റിലേക്ക് നേരിട്ട് ഉൾച്ചേർക്കാനാകും. ഈ സാഹചര്യത്തിൽ, ക്രോം ഏർപ്പെടുത്തിയിരിക്കുന്ന സുരക്ഷാ പരിമിതികളെ മറികടക്കാൻ base64 എൻകോഡിംഗ് സഹായിക്കുന്നു, പ്രത്യേകിച്ചും വിപുലീകരണങ്ങൾക്ക് Node.js-നിർദ്ദിഷ്ട കോഡ് എക്സിക്യൂട്ട് ചെയ്യാൻ കഴിയാത്തതിനാൽ.

പരിഗണിക്കേണ്ട മറ്റൊരു നിർണായക വശം എക്സൽ ഫയലുകളിൽ വലിയ ഇമേജ് ഡാറ്റ സെറ്റുകൾ കൈകാര്യം ചെയ്യുന്നതാണ്. ഒരു Excel ഷീറ്റിലേക്ക് ഒന്നിലധികം ചിത്രങ്ങൾ ഉൾച്ചേർക്കുന്നത് ഫയലിൻ്റെ വലുപ്പം ഗണ്യമായി വർദ്ധിപ്പിക്കും, ഇത് പ്രകടനത്തെ ബാധിച്ചേക്കാം, പ്രത്യേകിച്ച് ബ്രൗസർ അടിസ്ഥാനമാക്കിയുള്ള ആപ്ലിക്കേഷനിൽ. ഇത് ഒപ്റ്റിമൈസ് ചെയ്യാൻ, ഡെവലപ്പർമാർ വെബ്‌പി അല്ലെങ്കിൽ ജെപിഇജി പോലുള്ള കംപ്രസ് ചെയ്‌ത ഇമേജ് ഫോർമാറ്റുകൾ ഉപയോഗിച്ച് ഫയൽ വലുപ്പം കുറയ്ക്കണം, അതേസമയം ചിത്രത്തിൻ്റെ ഗുണനിലവാരം കേടുകൂടാതെയിരിക്കും.