এক্সেল সেলগুলিতে ছবি সন্নিবেশ করার জন্য একটি ক্রোম এক্সটেনশনে জাভাস্ক্রিপ্ট ব্যবহার করা

জাভাস্ক্রিপ্ট এবং শীটজেএস সহ এক্সেল ফাইলগুলিতে চিত্রগুলি এম্বেড করা

Excel (.xlsx) ফাইল তৈরি করে এমন একটি ক্রোম এক্সটেনশন ডেভেলপ করার সময়, সরাসরি কক্ষে ছবি এম্বেড করা একটি চ্যালেঞ্জিং কাজ হতে পারে। জাভাস্ক্রিপ্ট এবং লাইব্রেরি যেমন SheetJS স্প্রেডশীট তৈরি এবং সম্পাদনা সহজ করে, এমবেড করা ছবিগুলি পরিচালনা করার জন্য প্রায়শই আরও নির্দিষ্ট পরিচালনার প্রয়োজন হয়।

অনেক ক্ষেত্রে, ডেভেলপাররা সরাসরি ইমেজ এম্বেড করার পরিবর্তে সেলগুলিতে ইমেজ লিঙ্ক যোগ করতে সক্ষম হওয়ার সীমাবদ্ধতার সম্মুখীন হন। এই সমস্যাটি ইমেজ ডেটা কনভার্সন এবং এক্সেল ফাইল ফরম্যাটিং সংক্রান্ত জটিলতা থেকে উদ্ভূত হয়, বিশেষ করে ক্রোম এক্সটেনশনের মতো ব্রাউজার পরিবেশে।

এই নিবন্ধে, আমরা জাভাস্ক্রিপ্ট ব্যবহার করে সরাসরি এক্সেল ফাইল কক্ষে চিত্রগুলি এম্বেড করার একটি সমাধান অন্বেষণ করব। ছবিগুলি HTML উপাদানগুলি থেকে আনা হবে এবং উপযুক্ত এক্সেল কোষগুলিতে ঢোকানো হবে, যা ব্যবহারকারীদের তাদের স্প্রেডশীটের মধ্যে ভিজ্যুয়াল ডেটার প্রয়োজন তাদের জন্য আরও বিরামহীন অভিজ্ঞতা প্রদান করবে।

আমরা আলোচনা করব কিভাবে ExcelJS-এর মত লাইব্রেরিগুলিকে সংহত করা যায় এবং একটি সুরক্ষিত Chrome এক্সটেনশন পরিবেশে ছবি এম্বেড করার মতো সাধারণ চ্যালেঞ্জ মোকাবেলা করা যায়। উপরন্তু, আমরা একটি সফল বাস্তবায়ন নিশ্চিত করতে Node.js এবং Chrome এক্সটেনশন পদ্ধতির মধ্যে পার্থক্য পর্যালোচনা করব।

জাভাস্ক্রিপ্ট এবং এক্সেলজেএস ব্যবহার করে কীভাবে এক্সেল সেলগুলিতে চিত্রগুলি এম্বেড করবেন

আমি যে স্ক্রিপ্টটি দিয়েছি তা সরাসরি এক্সেল সেলগুলিতে ইমেজ এম্বেড করার সমস্যার সমাধান করে জাভাস্ক্রিপ্ট, ExcelJS, এবং Axios। প্রথমে, কমান্ড দিয়ে ExcelJS ব্যবহার করে একটি নতুন ওয়ার্কবুক শুরু করার মাধ্যমে স্ক্রিপ্ট শুরু হয় ExcelJS.ওয়ার্কবুক(), যা এক্সেল ফাইল তৈরির ভিত্তি। এটি তারপর কল করে একটি ওয়ার্কশীট তৈরি করে ওয়ার্কশীট যোগ করুন(). এই ওয়ার্কশীটটি সমস্ত ডেটা এবং চিত্রগুলির জন্য ধারক হিসাবে কাজ করে যা যোগ করা হবে৷ নমুনা ডেটাতে ইমেজ ইউআরএল অন্তর্ভুক্ত থাকে যেগুলি পরে আনা হবে এবং নির্দিষ্ট কক্ষগুলিতে এম্বেড করা হবে।

ইমেজ আনয়ন পরিচালনা করতে, স্ক্রিপ্টটি 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 এক্সটেনশনগুলি অতিরিক্ত নিরাপত্তা এবং কর্মক্ষমতা বিধিনিষেধের সাথে আসে যা নির্দিষ্ট API-এ সরাসরি অ্যাক্সেসকে বাধা দেয়। এর মানে হল Axios-এর মতো লাইব্রেরি ব্যবহার করে ছবি আনার মতো পদ্ধতিতে ব্রাউজার নীতি মেনে চলার জন্য বিকল্পের প্রয়োজন হতে পারে।

ব্রাউজার পরিবেশের জন্য একটি সমাধান ব্যবহার করা জড়িত হতে পারে বেস64 কাঁচা বাইনারি ডেটার পরিবর্তে এনকোড করা ছবি। Base64 এনকোডিং ইমেজগুলিকে সহজেই স্থানান্তরিত এবং একটি স্ট্রিং হিসাবে সংরক্ষণ করার অনুমতি দেয়, যা তারপরে SheetJS এর ​​মত লাইব্রেরি ব্যবহার করে সরাসরি একটি এক্সেল শীটে এম্বেড করা যেতে পারে। এই ক্ষেত্রে, base64 এনকোডিং Chrome দ্বারা আরোপিত নিরাপত্তা সীমাবদ্ধতা কাটিয়ে উঠতে সাহায্য করে, বিশেষ করে যেহেতু এক্সটেনশন Node.js-নির্দিষ্ট কোড চালাতে পারে না।

বিবেচনা করার আরেকটি গুরুত্বপূর্ণ দিক হল এক্সেল ফাইলগুলিতে বড় ইমেজ ডেটা সেট পরিচালনা করা। একটি এক্সেল শীটে একাধিক ছবি এম্বেড করা ফাইলের আকারকে ব্যাপকভাবে বৃদ্ধি করতে পারে, যা কার্যক্ষমতাকে প্রভাবিত করতে পারে, বিশেষ করে একটি ব্রাউজার-ভিত্তিক অ্যাপ্লিকেশনে। এটি অপ্টিমাইজ করার জন্য, ডেভেলপারদের ওয়েবপি বা JPEG-এর মতো সংকুচিত ইমেজ ফরম্যাটগুলি ব্যবহার করা উচিত যাতে ছবির মান অক্ষত থাকে তা নিশ্চিত করার জন্য ফাইলের আকার ছোট করে।