એક્સેલ સેલમાં ઈમેજીસ દાખલ કરવા માટે ક્રોમ એક્સ્ટેંશનમાં JavaScript નો ઉપયોગ કરવો

JavaScript અને SheetJS સાથે એક્સેલ ફાઈલોમાં ઈમેજીસ એમ્બેડ કરવી

જ્યારે એક્સેલ (.xlsx) ફાઈલો જનરેટ કરતું ક્રોમ એક્સ્ટેંશન ડેવલપ કરવામાં આવે, ત્યારે ઈમેજીસને સીધી કોષોમાં એમ્બેડ કરવી એ એક પડકારજનક કાર્ય હોઈ શકે છે. જ્યારે JavaScript અને SheetJS જેવી લાઇબ્રેરીઓ સ્પ્રેડશીટ્સ બનાવવા અને સંપાદિત કરવાનું સરળ બનાવે છે, એમ્બેડેડ ઇમેજને હેન્ડલ કરવા માટે ઘણીવાર વધુ ચોક્કસ હેન્ડલિંગની જરૂર પડે છે.

ઘણા કિસ્સાઓમાં, વિકાસકર્તાઓ છબીઓને સીધી રીતે એમ્બેડ કરવાને બદલે માત્ર કોષોમાં ઇમેજ લિંક્સ ઉમેરવામાં સક્ષમ હોવાની મર્યાદાનો સામનો કરે છે. આ સમસ્યા ઇમેજ ડેટા કન્વર્ઝન અને એક્સેલ ફાઇલ ફોર્મેટિંગમાં સંકળાયેલી જટિલતાઓને કારણે ઊભી થાય છે, ખાસ કરીને ક્રોમ એક્સટેન્શન જેવા બ્રાઉઝર વાતાવરણમાં.

આ લેખમાં, અમે JavaScript નો ઉપયોગ કરીને સીધા એક્સેલ ફાઇલ કોષોમાં છબીઓને એમ્બેડ કરવાનો ઉકેલ શોધીશું. છબીઓ HTML તત્વોમાંથી મેળવવામાં આવશે અને યોગ્ય એક્સેલ કોષોમાં દાખલ કરવામાં આવશે, જે વપરાશકર્તાઓને તેમની સ્પ્રેડશીટમાં વિઝ્યુઅલ ડેટાની જરૂર હોય તેમને વધુ સીમલેસ અનુભવ પ્રદાન કરશે.

અમે એક્સેલજેએસ જેવી લાઇબ્રેરીઓને કેવી રીતે એકીકૃત કરવી અને સંરક્ષિત ક્રોમ એક્સ્ટેંશન પર્યાવરણમાં છબીઓને એમ્બેડ કરવા જેવા સામાન્ય પડકારોનો સામનો કેવી રીતે કરવો તેની ચર્ચા કરીશું. વધુમાં, અમે સફળ અમલીકરણની ખાતરી કરવા માટે Node.js અને Chrome એક્સ્ટેંશન અભિગમ વચ્ચેના તફાવતોની સમીક્ષા કરીશું.

JavaScript અને ExcelJS નો ઉપયોગ કરીને એક્સેલ સેલમાં ઈમેજો કેવી રીતે એમ્બેડ કરવી

મેં જે સ્ક્રિપ્ટ પ્રદાન કરી છે તે છબીઓનો ઉપયોગ કરીને સીધા એક્સેલ કોષોમાં એમ્બેડ કરવાની સમસ્યાને હલ કરે છે જાવાસ્ક્રિપ્ટ, ExcelJS અને Axios. પ્રથમ, આદેશ સાથે ExcelJS નો ઉપયોગ કરીને નવી વર્કબુક શરૂ કરીને સ્ક્રિપ્ટ શરૂ થાય છે ExcelJS.વર્કબુક(), જે એક્સેલ ફાઇલો બનાવવા માટેનો પાયો છે. તે પછી ફોન કરીને વર્કશીટ બનાવે છે વર્કશીટ ઉમેરો(). આ કાર્યપત્રક ઉમેરવામાં આવશે તે તમામ ડેટા અને છબીઓ માટે કન્ટેનર તરીકે કાર્ય કરે છે. નમૂના ડેટામાં ઇમેજ URL નો સમાવેશ થાય છે જે પછીથી લાવવામાં આવશે અને ચોક્કસ કોષોમાં એમ્બેડ કરવામાં આવશે.

ઇમેજ ફેચિંગને હેન્ડલ કરવા માટે, સ્ક્રિપ્ટ એક્સિઓસ લાઇબ્રેરીનો ઉપયોગ કરે છે axios.get() તેમના URL માંથી છબીઓની વિનંતી કરવા માટે. Axios પ્રતિભાવ પ્રકાર "એરેબફર" નો ઉપયોગ કરીને દ્વિસંગી ડેટા તરીકે ઇમેજને પુનઃપ્રાપ્ત કરે છે, જે એક્સેલ ફાઇલમાં ઇમેજ જેવી બાઈનરી સામગ્રીને એમ્બેડ કરવા માટે યોગ્ય છે. ડેટા પ્રાપ્ત કર્યા પછી, ઇમેજને બફર ફોર્મેટમાં રૂપાંતરિત કરવામાં આવે છે, જે એક્સેલજેએસને તેને સેલમાં એમ્બેડ કરવા માટે માન્ય ઇમેજ તરીકે ઓળખવાની મંજૂરી આપે છે.

એકવાર ઇમેજ આનયન અને પ્રક્રિયા થઈ જાય, આદેશ 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();

ક્રોમ એક્સ્ટેન્શન્સ માટે એક્સેલ ફાઇલોમાં ઇમેજ એમ્બેડિંગને ઑપ્ટિમાઇઝ કરવું

વિકાસ કરતી વખતે એ ક્રોમ એક્સ્ટેંશન જે એક્સેલ ફાઈલોમાં ઈમેજીસને એકીકૃત કરે છે, એક મોટો પડકાર એ છે કે બ્રાઉઝર પર્યાવરણમાં ઈમેજ એમ્બેડીંગને કેવી રીતે હેન્ડલ કરવું. પરંપરાગત Node.js વાતાવરણથી વિપરીત, ક્રોમ એક્સ્ટેંશન વધારાની સુરક્ષા અને પ્રદર્શન પ્રતિબંધો સાથે આવે છે જે ચોક્કસ API ની સીધી ઍક્સેસને અટકાવે છે. આનો અર્થ એ છે કે Axios જેવી લાઇબ્રેરીઓનો ઉપયોગ કરીને છબીઓ મેળવવા જેવી પદ્ધતિઓને બ્રાઉઝર નીતિઓનું પાલન કરવા માટે વિકલ્પોની જરૂર પડી શકે છે.

બ્રાઉઝર એન્વાયર્નમેન્ટ્સ માટેના સોલ્યુશનમાં ઉપયોગ શામેલ હોઈ શકે છે આધાર64 કાચો બાઈનરી ડેટાને બદલે એન્કોડેડ ઈમેજો. Base64 એન્કોડિંગ છબીઓને સ્ટ્રિંગ તરીકે સરળતાથી ટ્રાન્સફર અને સ્ટોર કરવાની મંજૂરી આપે છે, જે પછી SheetJS જેવી લાઇબ્રેરીઓનો ઉપયોગ કરીને સીધા જ એક્સેલ શીટમાં એમ્બેડ કરી શકાય છે. આ કિસ્સામાં, base64 એન્કોડિંગ Chrome દ્વારા લાદવામાં આવેલી સુરક્ષા મર્યાદાઓને દૂર કરવામાં મદદ કરે છે, ખાસ કરીને કારણ કે એક્સ્ટેંશન Node.js-વિશિષ્ટ કોડને એક્ઝિક્યુટ કરી શકતા નથી.

ધ્યાનમાં લેવાનું બીજું નિર્ણાયક પાસું એ છે કે એક્સેલ ફાઇલોમાં મોટા ઇમેજ ડેટા સેટ્સનું સંચાલન. એક્સેલ શીટમાં બહુવિધ છબીઓને એમ્બેડ કરવાથી ફાઇલના કદમાં ભારે વધારો થઈ શકે છે, જે પ્રભાવને અસર કરી શકે છે, ખાસ કરીને બ્રાઉઝર-આધારિત એપ્લિકેશનમાં. આને ઑપ્ટિમાઇઝ કરવા માટે, ડેવલપર્સે ઇમેજની ગુણવત્તા અકબંધ રહે તેની ખાતરી કરતી વખતે ફાઇલનું કદ ઘટાડવા માટે WebP અથવા JPEG જેવા સંકુચિત ઇમેજ ફોર્મેટનો ઉપયોગ કરવો જોઈએ.