ਐਕਸਲ ਸੈੱਲਾਂ ਵਿੱਚ ਚਿੱਤਰ ਸੰਮਿਲਿਤ ਕਰਨ ਲਈ ਇੱਕ Chrome ਐਕਸਟੈਂਸ਼ਨ ਵਿੱਚ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਨਾ

JavaScript ਅਤੇ SheetJS ਨਾਲ ਐਕਸਲ ਫਾਈਲਾਂ ਵਿੱਚ ਚਿੱਤਰਾਂ ਨੂੰ ਏਮਬੈਡ ਕਰਨਾ

ਐਕਸਲ (.xlsx) ਫਾਈਲਾਂ ਬਣਾਉਣ ਵਾਲੇ Chrome ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਵਿਕਸਤ ਕਰਨ ਵੇਲੇ, ਚਿੱਤਰਾਂ ਨੂੰ ਸਿੱਧੇ ਸੈੱਲਾਂ ਵਿੱਚ ਏਮਬੈਡ ਕਰਨਾ ਇੱਕ ਚੁਣੌਤੀਪੂਰਨ ਕੰਮ ਹੋ ਸਕਦਾ ਹੈ। ਜਦੋਂ ਕਿ JavaScript ਅਤੇ ਸ਼ੀਟਜੇਐਸ ਵਰਗੀਆਂ ਲਾਇਬ੍ਰੇਰੀਆਂ ਸਪਰੈੱਡਸ਼ੀਟਾਂ ਨੂੰ ਬਣਾਉਣ ਅਤੇ ਸੰਪਾਦਿਤ ਕਰਨ ਨੂੰ ਸਰਲ ਬਣਾਉਂਦੀਆਂ ਹਨ, ਏਮਬੈਡਡ ਚਿੱਤਰਾਂ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਅਕਸਰ ਵਧੇਰੇ ਖਾਸ ਹੈਂਡਲਿੰਗ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।

ਬਹੁਤ ਸਾਰੇ ਮਾਮਲਿਆਂ ਵਿੱਚ, ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਚਿੱਤਰਾਂ ਨੂੰ ਸਿੱਧਾ ਏਮਬੈਡ ਕਰਨ ਦੀ ਬਜਾਏ ਸੈੱਲਾਂ ਵਿੱਚ ਚਿੱਤਰ ਲਿੰਕ ਜੋੜਨ ਦੇ ਯੋਗ ਹੋਣ ਦੀ ਸੀਮਾ ਦਾ ਸਾਹਮਣਾ ਕਰਨਾ ਪੈਂਦਾ ਹੈ। ਇਹ ਮੁੱਦਾ ਚਿੱਤਰ ਡੇਟਾ ਪਰਿਵਰਤਨ ਅਤੇ ਐਕਸਲ ਫਾਈਲ ਫਾਰਮੈਟਿੰਗ ਵਿੱਚ ਸ਼ਾਮਲ ਜਟਿਲਤਾਵਾਂ ਤੋਂ ਪੈਦਾ ਹੁੰਦਾ ਹੈ, ਖਾਸ ਤੌਰ 'ਤੇ ਕ੍ਰੋਮ ਐਕਸਟੈਂਸ਼ਨਾਂ ਵਰਗੇ ਬ੍ਰਾਊਜ਼ਰ ਵਾਤਾਵਰਣ ਵਿੱਚ।

ਇਸ ਲੇਖ ਵਿੱਚ, ਅਸੀਂ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਚਿੱਤਰਾਂ ਨੂੰ ਸਿੱਧੇ ਐਕਸਲ ਫਾਈਲ ਸੈੱਲਾਂ ਵਿੱਚ ਏਮਬੇਡ ਕਰਨ ਲਈ ਇੱਕ ਹੱਲ ਦੀ ਪੜਚੋਲ ਕਰਾਂਗੇ। ਚਿੱਤਰਾਂ ਨੂੰ HTML ਤੱਤਾਂ ਤੋਂ ਪ੍ਰਾਪਤ ਕੀਤਾ ਜਾਵੇਗਾ ਅਤੇ ਉਚਿਤ ਐਕਸਲ ਸੈੱਲਾਂ ਵਿੱਚ ਸੰਮਿਲਿਤ ਕੀਤਾ ਜਾਵੇਗਾ, ਉਹਨਾਂ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਇੱਕ ਹੋਰ ਸਹਿਜ ਅਨੁਭਵ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦਾ ਹੈ ਜਿਨ੍ਹਾਂ ਨੂੰ ਉਹਨਾਂ ਦੀਆਂ ਸਪ੍ਰੈਡਸ਼ੀਟਾਂ ਵਿੱਚ ਵਿਜ਼ੂਅਲ ਡੇਟਾ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।

ਅਸੀਂ ਇਸ ਬਾਰੇ ਚਰਚਾ ਕਰਾਂਗੇ ਕਿ ਐਕਸਲਜੇਐਸ ਵਰਗੀਆਂ ਲਾਇਬ੍ਰੇਰੀਆਂ ਨੂੰ ਕਿਵੇਂ ਏਕੀਕ੍ਰਿਤ ਕਰਨਾ ਹੈ ਅਤੇ ਇੱਕ ਸੁਰੱਖਿਅਤ Chrome ਐਕਸਟੈਂਸ਼ਨ ਵਾਤਾਵਰਨ ਵਿੱਚ ਚਿੱਤਰਾਂ ਨੂੰ ਏਮਬੈਡ ਕਰਨ ਵਰਗੀਆਂ ਆਮ ਚੁਣੌਤੀਆਂ ਨਾਲ ਨਜਿੱਠਣਾ ਹੈ। ਇਸ ਤੋਂ ਇਲਾਵਾ, ਅਸੀਂ ਸਫਲਤਾਪੂਰਵਕ ਲਾਗੂ ਕਰਨ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ Node.js ਅਤੇ Chrome ਐਕਸਟੈਂਸ਼ਨ ਪਹੁੰਚ ਵਿਚਕਾਰ ਅੰਤਰ ਦੀ ਸਮੀਖਿਆ ਕਰਾਂਗੇ।

JavaScript ਅਤੇ ExcelJS ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਐਕਸਲ ਸੈੱਲਾਂ ਵਿੱਚ ਚਿੱਤਰਾਂ ਨੂੰ ਕਿਵੇਂ ਏਮਬੇਡ ਕਰਨਾ ਹੈ

ਮੇਰੇ ਦੁਆਰਾ ਪ੍ਰਦਾਨ ਕੀਤੀ ਗਈ ਸਕ੍ਰਿਪਟ ਚਿੱਤਰਾਂ ਨੂੰ ਸਿੱਧੇ ਐਕਸਲ ਸੈੱਲਾਂ ਵਿੱਚ ਏਮਬੈਡ ਕਰਨ ਦੀ ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਕਰਦੀ ਹੈ JavaScript, ExcelJS, ਅਤੇ Axios. ਪਹਿਲਾਂ, ਸਕ੍ਰਿਪਟ ਕਮਾਂਡ ਨਾਲ ExcelJS ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਨਵੀਂ ਵਰਕਬੁੱਕ ਸ਼ੁਰੂ ਕਰਨ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦੀ ਹੈ ExcelJS. ਵਰਕਬੁੱਕ(), ਜੋ ਕਿ ਐਕਸਲ ਫਾਈਲਾਂ ਬਣਾਉਣ ਲਈ ਬੁਨਿਆਦ ਹੈ। ਇਹ ਫਿਰ ਕਾਲ ਕਰਕੇ ਇੱਕ ਵਰਕਸ਼ੀਟ ਬਣਾਉਂਦਾ ਹੈ ਐਡਵਰਕਸ਼ੀਟ(). ਇਹ ਵਰਕਸ਼ੀਟ ਸਾਰੇ ਡੇਟਾ ਅਤੇ ਚਿੱਤਰਾਂ ਲਈ ਕੰਟੇਨਰ ਵਜੋਂ ਕੰਮ ਕਰਦੀ ਹੈ ਜੋ ਸ਼ਾਮਲ ਕੀਤੇ ਜਾਣਗੇ। ਨਮੂਨਾ ਡੇਟਾ ਵਿੱਚ ਚਿੱਤਰ 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();

ਕਰੋਮ ਐਕਸਟੈਂਸ਼ਨਾਂ ਲਈ ਐਕਸਲ ਫਾਈਲਾਂ ਵਿੱਚ ਚਿੱਤਰ ਏਮਬੈਡਿੰਗ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣਾ

ਵਿਕਾਸ ਕਰਦੇ ਸਮੇਂ ਏ ਕਰੋਮ ਐਕਸਟੈਂਸ਼ਨ ਜੋ ਚਿੱਤਰਾਂ ਨੂੰ ਐਕਸਲ ਫਾਈਲਾਂ ਵਿੱਚ ਏਕੀਕ੍ਰਿਤ ਕਰਦਾ ਹੈ, ਇੱਕ ਵੱਡੀ ਚੁਣੌਤੀ ਇਹ ਹੈ ਕਿ ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਵਾਤਾਵਰਣ ਵਿੱਚ ਚਿੱਤਰ ਏਮਬੈਡਿੰਗ ਨੂੰ ਕਿਵੇਂ ਸੰਭਾਲਣਾ ਹੈ। ਰਵਾਇਤੀ Node.js ਵਾਤਾਵਰਨ ਦੇ ਉਲਟ, Chrome ਐਕਸਟੈਂਸ਼ਨ ਵਾਧੂ ਸੁਰੱਖਿਆ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਪਾਬੰਦੀਆਂ ਦੇ ਨਾਲ ਆਉਂਦੇ ਹਨ ਜੋ ਕੁਝ APIs ਤੱਕ ਸਿੱਧੀ ਪਹੁੰਚ ਨੂੰ ਰੋਕਦੇ ਹਨ। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ Axios ਵਰਗੀਆਂ ਲਾਇਬ੍ਰੇਰੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਚਿੱਤਰ ਪ੍ਰਾਪਤ ਕਰਨ ਵਰਗੇ ਤਰੀਕਿਆਂ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਨੀਤੀਆਂ ਦੀ ਪਾਲਣਾ ਕਰਨ ਲਈ ਵਿਕਲਪਾਂ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ।

ਬਰਾਊਜ਼ਰ ਵਾਤਾਵਰਣ ਲਈ ਇੱਕ ਹੱਲ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਸ਼ਾਮਲ ਹੋ ਸਕਦਾ ਹੈ base64 ਕੱਚੇ ਬਾਈਨਰੀ ਡੇਟਾ ਦੀ ਬਜਾਏ ਏਨਕੋਡ ਕੀਤੀਆਂ ਤਸਵੀਰਾਂ। ਬੇਸ 64 ਏਨਕੋਡਿੰਗ ਚਿੱਤਰਾਂ ਨੂੰ ਇੱਕ ਸਤਰ ਦੇ ਰੂਪ ਵਿੱਚ ਆਸਾਨੀ ਨਾਲ ਟ੍ਰਾਂਸਫਰ ਅਤੇ ਸਟੋਰ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ, ਜਿਸ ਨੂੰ ਫਿਰ ਸ਼ੀਟਜੇਐਸ ਵਰਗੀਆਂ ਲਾਇਬ੍ਰੇਰੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਿੱਧੇ ਐਕਸਲ ਸ਼ੀਟ ਵਿੱਚ ਏਮਬੈਡ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਇਸ ਸਥਿਤੀ ਵਿੱਚ, ਬੇਸ64 ਏਨਕੋਡਿੰਗ ਕ੍ਰੋਮ ਦੁਆਰਾ ਲਗਾਈਆਂ ਗਈਆਂ ਸੁਰੱਖਿਆ ਸੀਮਾਵਾਂ ਨੂੰ ਦੂਰ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੀ ਹੈ, ਖਾਸ ਕਰਕੇ ਕਿਉਂਕਿ ਐਕਸਟੈਂਸ਼ਨ Node.js-ਵਿਸ਼ੇਸ਼ ਕੋਡ ਨੂੰ ਲਾਗੂ ਨਹੀਂ ਕਰ ਸਕਦੇ ਹਨ।

ਵਿਚਾਰ ਕਰਨ ਲਈ ਇੱਕ ਹੋਰ ਮਹੱਤਵਪੂਰਨ ਪਹਿਲੂ ਹੈ ਐਕਸਲ ਫਾਈਲਾਂ ਵਿੱਚ ਵੱਡੇ ਚਿੱਤਰ ਡੇਟਾ ਸੈੱਟਾਂ ਨੂੰ ਸੰਭਾਲਣਾ। ਇੱਕ ਐਕਸਲ ਸ਼ੀਟ ਵਿੱਚ ਕਈ ਚਿੱਤਰਾਂ ਨੂੰ ਏਮਬੈਡ ਕਰਨ ਨਾਲ ਫਾਈਲ ਦੇ ਆਕਾਰ ਵਿੱਚ ਭਾਰੀ ਵਾਧਾ ਹੋ ਸਕਦਾ ਹੈ, ਜੋ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰ ਸਕਦਾ ਹੈ, ਖਾਸ ਤੌਰ 'ਤੇ ਬ੍ਰਾਊਜ਼ਰ-ਅਧਾਰਿਤ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ। ਇਸ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣ ਲਈ, ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਸੰਕੁਚਿਤ ਚਿੱਤਰ ਫਾਰਮੈਟ ਜਿਵੇਂ ਕਿ WebP ਜਾਂ JPEG ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ ਤਾਂ ਜੋ ਇਹ ਯਕੀਨੀ ਬਣਾਇਆ ਜਾ ਸਕੇ ਕਿ ਚਿੱਤਰ ਗੁਣਵੱਤਾ ਬਰਕਰਾਰ ਰਹੇ।