Wykorzystanie JavaScript w rozszerzeniu przeglądarki Chrome do wstawiania obrazów do komórek programu Excel

Osadzanie obrazów w plikach Excel za pomocą JavaScript i SheetJS

Podczas opracowywania rozszerzenia do przeglądarki Chrome generującego pliki Excel (.xlsx) osadzanie obrazów bezpośrednio w komórkach może być trudnym zadaniem. Chociaż JavaScript i biblioteki takie jak SheetJS upraszczają tworzenie i edycję arkuszy kalkulacyjnych, obsługa osadzonych obrazów często wymaga bardziej szczegółowej obsługi.

W wielu przypadkach programiści borykają się z ograniczeniami polegającymi na możliwości dodawania łączy do obrazów jedynie do komórek, zamiast bezpośredniego osadzania obrazów. Ten problem wynika ze złożoności związanej z konwersją danych obrazu i formatowaniem plików Excel, szczególnie w środowisku przeglądarki, takim jak rozszerzenia Chrome.

W tym artykule przyjrzymy się rozwiązaniu umożliwiającemu osadzanie obrazów bezpośrednio w komórkach plików Excel przy użyciu JavaScript. Obrazy zostaną pobrane z elementów HTML i wstawione do odpowiednich komórek Excela, co zapewni płynniejszą obsługę użytkownikom potrzebującym danych wizualnych w swoich arkuszach kalkulacyjnych.

Omówimy, jak integrować biblioteki takie jak ExcelJS i stawić czoła typowym wyzwaniom, takim jak osadzanie obrazów w chronionym środowisku rozszerzeń Chrome. Dodatkowo sprawdzimy różnice między podejściami do rozszerzeń Node.js i Chrome, aby zapewnić pomyślną implementację.

Jak osadzać obrazy w komórkach Excela za pomocą JavaScript i ExcelJS

Dostarczony przeze mnie skrypt rozwiązuje problem osadzania obrazów bezpośrednio w komórkach Excela za pomocą JavaScript, ExcelJS i Axios. Najpierw skrypt rozpoczyna się od zainicjowania nowego skoroszytu przy użyciu programu ExcelJS za pomocą polecenia ExcelJS.Workbook(), który jest podstawą do generowania plików Excel. Następnie tworzy arkusz, wywołując dodajarkusz(). Arkusz ten pełni rolę kontenera dla wszystkich danych i obrazów, które zostaną dodane. Przykładowe dane obejmują adresy URL obrazów, które zostaną później pobrane i osadzone w określonych komórkach.

Do obsługi pobierania obrazów skrypt wykorzystuje bibliotekę Axios with oś.get() aby żądać obrazów ze swoich adresów URL. Axios pobiera obraz jako dane binarne przy użyciu typu odpowiedzi „arraybuffer”, który jest odpowiedni do osadzania treści binarnej, takiej jak obrazy, w pliku Excel. Po otrzymaniu danych obraz jest konwertowany do formatu buforowego, dzięki czemu program ExcelJS rozpoznaje go jako prawidłowy obraz do osadzenia w komórce.

Po pobraniu i przetworzeniu obrazu zostanie wydane polecenie skoroszyt.addImage() służy do wstawiania obrazu do skoroszytu. Ten krok definiuje obraz i przygotowuje go do umieszczenia w określonym miejscu arkusza. Po tym, arkusz.addImage() określa, gdzie obraz powinien zostać umieszczony, w tym przypadku w kolumnie „B” bieżącego wiersza. Wysokość wiersza jest dostosowywana w taki sposób, aby obraz dobrze pasował do komórki.

Na koniec skrypt zapisuje skoroszyt za pomocą skoroszyt.xlsx.writeFile(), który zapisuje plik w systemie lokalnym. To kończy proces, w wyniku czego powstaje plik Excel z osadzonymi obrazami bezpośrednio w komórkach, a nie tylko łączami. Ta metoda jest bardzo skuteczna w przypadkach, gdy w raportach lub arkuszach danych należy uwzględnić obrazy, zapewniając użytkownikom płynną interakcję z plikami Excel zawierającymi zarówno dane, jak i elementy wizualne.

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();

Optymalizacja osadzania obrazów w plikach Excel dla rozszerzeń Chrome

Podczas opracowywania A Rozszerzenie Chrome który integruje obrazy z plikami Excel, jednym z głównych wyzwań jest obsługa osadzania obrazów w środowisku przeglądarki. W przeciwieństwie do tradycyjnych środowisk Node.js, rozszerzenia Chrome mają dodatkowe ograniczenia dotyczące bezpieczeństwa i wydajności, które uniemożliwiają bezpośredni dostęp do niektórych interfejsów API. Oznacza to, że metody takie jak pobieranie obrazów przy użyciu bibliotek takich jak Axios mogą wymagać alternatyw, aby zachować zgodność z zasadami przeglądarki.

Rozwiązanie dla środowisk przeglądarkowych może wymagać użycia baza64 zakodowane obrazy zamiast surowych danych binarnych. Kodowanie Base64 umożliwia łatwe przesyłanie i przechowywanie obrazów w postaci ciągu znaków, który można następnie osadzić bezpośrednio w arkuszu programu Excel przy użyciu bibliotek takich jak SheetJS. W tym przypadku kodowanie base64 pomaga pokonać ograniczenia bezpieczeństwa narzucone przez Chrome, zwłaszcza że rozszerzenia nie mogą wykonywać kodu specyficznego dla Node.js.

Kolejnym istotnym aspektem, który należy wziąć pod uwagę, jest obsługa dużych zbiorów danych obrazów w plikach Excel. Osadzanie wielu obrazów w arkuszu programu Excel może drastycznie zwiększyć rozmiar pliku, co może mieć wpływ na wydajność, zwłaszcza w aplikacji opartej na przeglądarce. Aby to zoptymalizować, programiści powinni używać skompresowanych formatów obrazów, takich jak WebP lub JPEG, aby zminimalizować rozmiar pliku, zapewniając jednocześnie nienaruszoną jakość obrazu.