ایکسل سیلز میں امیجز داخل کرنے کے لیے کروم ایکسٹینشن میں جاوا اسکرپٹ کا استعمال

جاوا اسکرپٹ اور شیٹ جے ایس کے ساتھ ایکسل فائلوں میں امیجز کو سرایت کرنا

ایک کروم ایکسٹینشن تیار کرتے وقت جو Excel (.xlsx) فائلیں تیار کرتی ہے، تصاویر کو براہ راست سیلز میں سرایت کرنا ایک مشکل کام ہو سکتا ہے۔ اگرچہ JavaScript اور SheetJS جیسی لائبریریاں اسپریڈشیٹ بنانے اور اس میں ترمیم کرنے کو آسان بناتی ہیں، ایمبیڈڈ امیجز کو ہینڈل کرنے کے لیے اکثر زیادہ مخصوص ہینڈلنگ کی ضرورت ہوتی ہے۔

بہت سے معاملات میں، ڈویلپرز کو تصاویر کو براہ راست سرایت کرنے کے بجائے صرف سیلوں میں تصویری لنکس شامل کرنے کے قابل ہونے کی حد کا سامنا کرنا پڑتا ہے۔ یہ مسئلہ امیج ڈیٹا کنورژن اور ایکسل فائل فارمیٹنگ میں شامل پیچیدگیوں سے پیدا ہوتا ہے، خاص طور پر کروم ایکسٹینشن جیسے براؤزر ماحول میں۔

اس آرٹیکل میں، ہم JavaScript کا استعمال کرتے ہوئے تصاویر کو براہ راست Excel فائل سیلز میں ایمبیڈ کرنے کا حل تلاش کریں گے۔ تصاویر کو HTML عناصر سے حاصل کیا جائے گا اور مناسب Excel سیلز میں داخل کیا جائے گا، جو ان صارفین کے لیے زیادہ ہموار تجربہ پیش کرے گا جنہیں اپنی اسپریڈشیٹ میں بصری ڈیٹا کی ضرورت ہے۔

ہم اس بات پر تبادلہ خیال کریں گے کہ کس طرح ایکسل جے ایس جیسی لائبریریوں کو مربوط کیا جائے اور عام چیلنجوں سے نمٹا جائے جیسے کہ محفوظ کروم ایکسٹینشن ماحول میں تصاویر کو سرایت کرنا۔ مزید برآں، ہم کامیاب نفاذ کو یقینی بنانے کے لیے Node.js اور Chrome ایکسٹینشن کے طریقوں کے درمیان فرق کا جائزہ لیں گے۔

جاوا اسکرپٹ اور ایکسل جے ایس کا استعمال کرتے ہوئے تصاویر کو ایکسل سیلز میں ایمبیڈ کرنے کا طریقہ

میں نے جو اسکرپٹ فراہم کیا ہے وہ براہ راست ایکسل سیلز میں امبیڈ کرنے کا مسئلہ حل کرتا ہے۔ جاوا اسکرپٹ، ExcelJS، اور Axios۔ سب سے پہلے، اسکرپٹ کا آغاز کمانڈ کے ساتھ ExcelJS کا استعمال کرتے ہوئے ایک نئی ورک بک کو شروع کرنے سے ہوتا ہے۔ ExcelJS.Workbook()جو کہ ایکسل فائلیں بنانے کی بنیاد ہے۔ یہ پھر کال کرکے ایک ورک شیٹ بناتا ہے۔ ورک شیٹ شامل کریں(). یہ ورک شیٹ ان تمام ڈیٹا اور امیجز کے لیے کنٹینر کے طور پر کام کرتی ہے جو شامل کیے جائیں گے۔ نمونے کے ڈیٹا میں تصویری URLs شامل ہیں جو بعد میں حاصل کیے جائیں گے اور مخصوص سیلز میں سرایت کیے جائیں گے۔

تصویر کی بازیافت کو سنبھالنے کے لیے، اسکرپٹ Axios لائبریری کے ساتھ استعمال کرتا ہے۔ axios.get() ان کے URLs سے تصاویر کی درخواست کرنے کے لیے۔ Axios ریسپانس ٹائپ "arraybuffer" کا استعمال کرتے ہوئے تصویر کو بائنری ڈیٹا کے طور پر بازیافت کرتا ہے، جو کہ ایکسل فائل میں تصاویر جیسے بائنری مواد کو سرایت کرنے کے لیے موزوں ہے۔ ڈیٹا حاصل کرنے کے بعد، تصویر کو بفر فارمیٹ میں تبدیل کر دیا جاتا ہے، جس سے 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();

کروم ایکسٹینشنز کے لیے ایکسل فائلوں میں امیج ایمبیڈنگ کو بہتر بنانا

ترقی کرتے وقت a کروم ایکسٹینشن جو تصاویر کو ایکسل فائلوں میں ضم کرتا ہے، ایک بڑا چیلنج یہ ہے کہ براؤزر کے ماحول میں امیج ایمبیڈنگ کو کیسے ہینڈل کیا جائے۔ روایتی Node.js ماحول کے برعکس، Chrome ایکسٹینشنز اضافی سیکیورٹی اور کارکردگی کی پابندیوں کے ساتھ آتی ہیں جو کچھ APIs تک براہ راست رسائی کو روکتی ہیں۔ اس کا مطلب ہے کہ لائبریریوں جیسے کہ Axios کا استعمال کرتے ہوئے تصاویر کی بازیافت جیسے طریقوں کو براؤزر کی پالیسیوں کی تعمیل کرنے کے لیے متبادل کی ضرورت ہو سکتی ہے۔

براؤزر کے ماحول کے حل میں استعمال کرنا شامل ہوسکتا ہے۔ base64 خام بائنری ڈیٹا کے بجائے انکوڈ شدہ تصاویر۔ Base64 انکوڈنگ تصاویر کو آسانی سے منتقلی اور سٹرنگ کے طور پر ذخیرہ کرنے کی اجازت دیتی ہے، جسے پھر شیٹ جے ایس جیسی لائبریریوں کا استعمال کرتے ہوئے براہ راست ایکسل شیٹ میں ایمبیڈ کیا جا سکتا ہے۔ اس صورت میں، base64 انکوڈنگ کروم کی طرف سے لگائی گئی حفاظتی حدود پر قابو پانے میں مدد کرتی ہے، خاص طور پر چونکہ ایکسٹینشن Node.js کے مخصوص کوڈ پر عمل درآمد نہیں کر سکتی۔

غور کرنے کا ایک اور اہم پہلو ایکسل فائلوں میں بڑے امیج ڈیٹا سیٹس کو سنبھالنا ہے۔ ایکسل شیٹ میں متعدد تصاویر کو سرایت کرنے سے فائل کے سائز میں زبردست اضافہ ہوسکتا ہے، جو کارکردگی کو متاثر کرسکتا ہے، خاص طور پر براؤزر پر مبنی ایپلی کیشن میں۔ اس کو بہتر بنانے کے لیے، ڈویلپرز کو کمپریسڈ امیج فارمیٹس جیسے WebP یا JPEG کو استعمال کرنا چاہیے تاکہ فائل کا سائز کم سے کم کیا جا سکے جبکہ تصویر کا معیار برقرار رہے۔