Využití JavaScriptu v rozšíření pro Chrome k vkládání obrázků do buněk Excelu

Vkládání obrázků do souborů aplikace Excel pomocí JavaScriptu a SheetJS

Při vývoji rozšíření pro Chrome, které generuje soubory Excel (.xlsx), může být vkládání obrázků přímo do buněk náročný úkol. Zatímco JavaScript a knihovny jako SheetJS zjednodušují vytváření a úpravy tabulek, manipulace s vloženými obrázky často vyžaduje specifičtější zacházení.

V mnoha případech se vývojáři potýkají s omezením spočívajícím v možnosti pouze přidávat odkazy na obrázky do buněk místo přímého vkládání obrázků. Tento problém vyplývá ze složitosti převodu obrazových dat a formátování souborů aplikace Excel, zejména v prostředí prohlížeče, jako jsou rozšíření Chrome.

V tomto článku prozkoumáme řešení pro vkládání obrázků přímo do buněk souboru Excel pomocí JavaScriptu. Obrázky budou načteny z prvků HTML a vloženy do příslušných buněk aplikace Excel, což uživatelům, kteří potřebují vizuální data ve svých tabulkách, nabídne hladší zážitek.

Budeme diskutovat o tom, jak integrovat knihovny, jako je ExcelJS, a jak se vypořádat s běžnými výzvami, jako je vkládání obrázků do chráněného prostředí rozšíření Chrome. Abychom zajistili úspěšnou implementaci, prozkoumáme rozdíly mezi přístupy Node.js a rozšířeními pro Chrome.

Jak vkládat obrázky do buněk Excelu pomocí JavaScriptu a ExcelJS

Skript, který jsem poskytl, řeší problém vkládání obrázků přímo do buněk aplikace Excel pomocí JavaScript, ExcelJS a Axios. Nejprve se skript spustí inicializací nového sešitu pomocí ExcelJS pomocí příkazu ExcelJS.Sešit(), což je základ pro generování souborů Excel. Zavoláním pak vytvoří list addWorksheet(). Tento list funguje jako kontejner pro všechna data a obrázky, které budou přidány. Ukázková data zahrnují adresy URL obrázků, které budou později načteny a vloženy do konkrétních buněk.

Pro zpracování načítání obrázků používá skript knihovnu Axios s axios.get() požadovat obrázky z jejich adres URL. Axios načte obrázek jako binární data pomocí responseType "arraybuffer", který je vhodný pro vkládání binárního obsahu, jako jsou obrázky, do souboru aplikace Excel. Po přijetí dat je obrázek převeden do formátu vyrovnávací paměti, což umožňuje ExcelJS rozpoznat jej jako platný obrázek pro vložení do buňky.

Jakmile je obrázek načten a zpracován, příkaz workbook.addImage() slouží k vložení obrázku do sešitu. Tento krok definuje obrázek a připraví jej k umístění na konkrétní místo v listu. Po tomto worksheet.addImage() určuje, kam má být obrázek umístěn, v tomto případě do sloupce "B" aktuálního řádku. Výška řádku je upravena tak, aby se obrázek dobře vešel do buňky.

Nakonec skript uloží sešit pomocí sešit.xlsx.writeFile(), který zapíše soubor do místního systému. Tím je proces dokončen a výsledkem je soubor aplikace Excel s vloženými obrázky přímo v buňkách, nikoli pouze odkazy. Tato metoda je vysoce účinná v případech, kdy je třeba do sestav nebo datových listů zahrnout obrázky, a poskytuje uživatelům bezproblémovou interakci se soubory aplikace Excel, které obsahují data i vizuální prvky.

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

Optimalizace vkládání obrázků do souborů aplikace Excel pro rozšíření Chrome

Při vývoji a Rozšíření pro Chrome který integruje obrázky do souborů aplikace Excel, je jedním z hlavních problémů, jak zvládnout vkládání obrázků do prostředí prohlížeče. Na rozdíl od tradičních prostředí Node.js přicházejí rozšíření pro Chrome s dalšími omezeními zabezpečení a výkonu, která brání přímému přístupu k určitým rozhraním API. To znamená, že metody, jako je načítání obrázků pomocí knihoven, jako je Axios, mohou potřebovat alternativy, aby vyhovovaly zásadám prohlížeče.

Řešení pro prostředí prohlížeče by mohlo zahrnovat použití základ 64 zakódované obrázky namísto nezpracovaných binárních dat. Kódování Base64 umožňuje snadno přenášet a ukládat obrázky jako řetězec, který pak lze vložit přímo do listu aplikace Excel pomocí knihoven, jako je SheetJS. V tomto případě kódování base64 pomáhá překonat bezpečnostní omezení uložená Chrome, zejména proto, že rozšíření nemohou spustit kód specifický pro Node.js.

Dalším zásadním aspektem, který je třeba zvážit, je manipulace s velkými soubory obrazových dat v souborech Excel. Vložení více obrázků do listu aplikace Excel může výrazně zvýšit velikost souboru, což může ovlivnit výkon, zejména v aplikacích založených na prohlížeči. Aby to vývojáři optimalizovali, měli by používat komprimované formáty obrázků, jako je WebP nebo JPEG, aby minimalizovali velikost souboru a zároveň zajistili, že kvalita obrázku zůstane nedotčena.