Використання 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 за допомогою JavaScript, ExcelJS і Axios. По-перше, сценарій починається з ініціалізації нової книги за допомогою команди ExcelJS ExcelJS.Workbook(), який є основою для створення файлів Excel. Потім він створює робочий аркуш шляхом виклику addWorksheet(). Цей робочий аркуш діє як контейнер для всіх даних і зображень, які будуть додані. Зразок даних містить URL-адреси зображень, які пізніше буде отримано та вставлено в певні комірки.

Щоб отримати зображення, сценарій використовує бібліотеку Axios з axios.get() запитувати зображення з їхніх URL-адрес. Axios отримує зображення як двійкові дані за допомогою responseType "arraybuffer", який підходить для вбудовування двійкового вмісту, наприклад зображень, у файл Excel. Після отримання даних зображення перетворюється у формат буфера, що дозволяє ExcelJS розпізнавати його як дійсне зображення для вбудовування в комірку.

Після отримання та обробки зображення команда workbook.addImage() використовується для вставки зображення в робочу книгу. Цей крок визначає зображення та готує його до розміщення в певному місці на аркуші. Слідом за цим, worksheet.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

При розробці a Розширення Chrome який інтегрує зображення у файли Excel, одна з основних проблем полягає в тому, як обробити вбудовування зображень у середовищі браузера. На відміну від традиційних середовищ Node.js, розширення Chrome мають додаткові обмеження щодо безпеки та продуктивності, які перешкоджають прямому доступу до певних API. Це означає, що такі методи, як отримання зображень за допомогою бібліотек, таких як Axios, можуть потребувати альтернативи для відповідності політикам браузера.

Рішення для середовищ браузера може передбачати використання база64 закодовані зображення замість необроблених двійкових даних. Кодування Base64 дозволяє легко передавати зображення та зберігати їх у вигляді рядка, який потім можна вставляти безпосередньо в аркуш Excel за допомогою бібліотек, таких як SheetJS. У цьому випадку кодування base64 допомагає подолати обмеження безпеки, накладені Chrome, особливо тому, що розширення не можуть виконувати код Node.js.

Іншим важливим аспектом, який слід враховувати, є обробка великих наборів даних зображень у файлах Excel. Вбудовування кількох зображень у аркуш Excel може значно збільшити розмір файлу, що може вплинути на продуктивність, особливо в програмі на основі браузера. Щоб оптимізувати це, розробники повинні використовувати формати стислих зображень, як-от WebP або JPEG, щоб мінімізувати розмір файлу, забезпечуючи незмінну якість зображення.