استخدام JavaScript في ملحق Chrome لإدراج الصور في خلايا Excel

تضمين الصور في ملفات Excel باستخدام JavaScript وSheetJS

عند تطوير ملحق Chrome الذي ينشئ ملفات Excel (.xlsx)، قد يكون تضمين الصور مباشرة في الخلايا مهمة صعبة. بينما تعمل JavaScript والمكتبات مثل SheetJS على تبسيط إنشاء جداول البيانات وتحريرها، فإن التعامل مع الصور المضمنة غالبًا ما يتطلب معالجة أكثر تحديدًا.

في كثير من الحالات، يواجه المطورون قيودًا تتمثل في قدرتهم على إضافة روابط الصور إلى الخلايا فقط بدلاً من تضمين الصور مباشرة. تنشأ هذه المشكلة من التعقيدات التي ينطوي عليها تحويل بيانات الصور وتنسيق ملفات Excel، خاصة في بيئة المتصفح مثل ملحقات Chrome.

في هذه المقالة، سوف نستكشف حلاً لتضمين الصور مباشرةً في خلايا ملفات Excel باستخدام JavaScript. سيتم جلب الصور من عناصر HTML وإدراجها في خلايا Excel المناسبة، مما يوفر تجربة أكثر سلاسة للمستخدمين الذين يحتاجون إلى بيانات مرئية داخل جداول البيانات الخاصة بهم.

سنناقش كيفية دمج المكتبات مثل ExcelJS ومعالجة التحديات الشائعة مثل تضمين الصور في بيئة امتدادات Chrome المحمية. بالإضافة إلى ذلك، سنراجع الاختلافات بين أساليب Node.js وامتدادات Chrome لضمان التنفيذ الناجح.

كيفية تضمين الصور في خلايا Excel باستخدام JavaScript وExcelJS

يحل البرنامج النصي الذي قدمته مشكلة تضمين الصور مباشرة في خلايا Excel باستخدام جافا سكريبتو ExcelJS و أكسيوس. أولاً، يبدأ البرنامج النصي بتهيئة مصنف جديد باستخدام ExcelJS باستخدام الأمر ExcelJS.Workbook()، وهو الأساس لإنشاء ملفات Excel. ثم يقوم بإنشاء ورقة عمل عن طريق الاتصال ورقة عمل إضافية (). تعمل ورقة العمل هذه كحاوية لجميع البيانات والصور التي سيتم إضافتها. تتضمن بيانات العينة عناوين URL للصور التي سيتم جلبها لاحقًا ودمجها في خلايا محددة.

للتعامل مع جلب الصورة، يستخدم البرنامج النصي مكتبة Axios مع أكسيوس.جيت() لطلب الصور من عناوين URL الخاصة بهم. يقوم Axios باسترداد الصورة كبيانات ثنائية باستخدام ResponseType "arraybuffer"، وهو مناسب لتضمين محتوى ثنائي مثل الصور في ملف Excel. بعد تلقي البيانات، يتم تحويل الصورة إلى تنسيق مخزن مؤقت، مما يسمح لبرنامج ExcelJS بالتعرف عليها كصورة صالحة للتضمين في الخلية.

بمجرد جلب الصورة ومعالجتها، سيظهر الأمر مصنف.addImage() يستخدم لإدراج الصورة في المصنف. تحدد هذه الخطوة الصورة وتجهزها لوضعها في مكان محدد داخل ورقة العمل. بعد هذا، ورقة عمل.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();

تحسين تضمين الصور في ملفات Excel لملحقات Chrome

عند تطوير أ ملحق كروم الذي يدمج الصور في ملفات Excel، يتمثل أحد التحديات الرئيسية في كيفية التعامل مع تضمين الصور داخل بيئة المتصفح. على عكس بيئات Node.js التقليدية، تأتي ملحقات Chrome مع قيود إضافية على الأمان والأداء تمنع الوصول المباشر إلى واجهات برمجة تطبيقات معينة. وهذا يعني أن طرقًا مثل جلب الصور باستخدام مكتبات مثل Axios قد تحتاج إلى بدائل للامتثال لسياسات المتصفح.

قد يتضمن الحل لبيئات المتصفح استخدام base64 الصور المشفرة بدلاً من البيانات الثنائية الخام. يسمح ترميز Base64 بنقل الصور وتخزينها بسهولة كسلسلة، والتي يمكن بعد ذلك تضمينها مباشرة في ورقة Excel باستخدام مكتبات مثل SheetJS. في هذه الحالة، يساعد تشفير base64 في التغلب على القيود الأمنية التي يفرضها Chrome، خاصة وأن الامتدادات لا يمكنها تنفيذ تعليمات برمجية خاصة بـ Node.js.

هناك جانب آخر مهم يجب مراعاته وهو التعامل مع مجموعات بيانات الصور الكبيرة في ملفات Excel. يمكن أن يؤدي تضمين صور متعددة في ورقة Excel إلى زيادة حجم الملف بشكل كبير، مما قد يؤثر على الأداء، خاصة في التطبيق المستند إلى المتصفح. لتحسين ذلك، يجب على المطورين استخدام تنسيقات الصور المضغوطة مثل WebP أو JPEG لتقليل حجم الملف مع ضمان بقاء جودة الصورة سليمة.