Používanie JavaScriptu v rozšírení Chrome na vkladanie obrázkov do buniek Excelu

Vkladanie obrázkov do súborov Excel pomocou JavaScriptu a SheetJS

Pri vývoji rozšírenia pre Chrome, ktoré generuje súbory Excel (.xlsx), môže byť vkladanie obrázkov priamo do buniek náročná úloha. Zatiaľ čo JavaScript a knižnice ako SheetJS zjednodušujú vytváranie a úpravu tabuliek, manipulácia s vloženými obrázkami si často vyžaduje špecifickejšie zaobchádzanie.

V mnohých prípadoch sa vývojári stretávajú s obmedzením, že môžu do buniek iba pridávať odkazy na obrázky, a nie priamo vkladať obrázky. Tento problém vzniká v dôsledku zložitosti konverzie obrazových údajov a formátovania súborov programu Excel, najmä v prostredí prehliadača, ako sú rozšírenia prehliadača Chrome.

V tomto článku preskúmame riešenie na vkladanie obrázkov priamo do buniek súboru Excel pomocou JavaScriptu. Obrázky sa načítajú z prvkov HTML a vložia sa do príslušných buniek Excelu, čo používateľom, ktorí vo svojich tabuľkách potrebujú vizuálne údaje, ponúkne plynulejší zážitok.

Budeme diskutovať o tom, ako integrovať knižnice, ako je ExcelJS, a riešiť bežné výzvy, ako je vkladanie obrázkov do chráneného prostredia rozšírenia Chrome. Okrem toho preskúmame rozdiely medzi prístupmi rozšírení Node.js a Chrome, aby sme zaistili úspešnú implementáciu.

Ako vložiť obrázky do buniek Excelu pomocou JavaScriptu a ExcelJS

Skript, ktorý som poskytol, rieši problém vkladania obrázkov priamo do buniek Excelu pomocou JavaScript, ExcelJS a Axios. Najprv sa skript spustí inicializáciou nového zošita pomocou ExcelJS s príkazom ExcelJS.Workbook(), ktorý je základom pre generovanie súborov programu Excel. Potom vytvorí pracovný hárok volaním addWorksheet(). Tento pracovný hárok funguje ako kontajner pre všetky údaje a obrázky, ktoré budú pridané. Vzorové údaje zahŕňajú adresy URL obrázkov, ktoré budú neskôr načítané a vložené do konkrétnych buniek.

Na spracovanie načítania obrázkov skript používa knižnicu Axios s axios.get() vyžiadať obrázky z ich adries URL. Axios získava obrázok ako binárne dáta pomocou responseType "arraybuffer", ktorý je vhodný na vkladanie binárneho obsahu, ako sú obrázky, do súboru Excel. Po prijatí údajov sa obrázok skonvertuje do vyrovnávacej pamäte, čo umožňuje ExcelJS rozpoznať ho ako platný obrázok na vloženie do bunky.

Po načítaní a spracovaní obrázka príkaz workbook.addImage() slúži na vloženie obrázku do zošita. Tento krok definuje obrázok a pripraví ho na umiestnenie na konkrétne miesto v pracovnom hárku. Po tomto worksheet.addImage() určuje, kam má byť obrázok umiestnený, v tomto prípade do stĺpca "B" aktuálneho riadku. Výška riadka je upravená tak, aby sa zabezpečilo, že obrázok dobre zapadne do bunky.

Nakoniec skript uloží zošit pomocou workbook.xlsx.writeFile(), ktorý zapíše súbor do lokálneho systému. Tým je proces dokončený a výsledkom je súbor programu Excel s vloženými obrázkami priamo v bunkách, a nie iba odkazmi. Táto metóda je vysoko efektívna v prípadoch, keď je potrebné zahrnúť obrázky do správ alebo údajových hárkov, čím poskytuje používateľom bezproblémovú interakciu so súbormi Excelu, ktoré obsahujú údaje aj vizuálne 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();

Optimalizácia vkladania obrázkov do súborov Excel pre rozšírenia Chrome

Pri vývoji a Rozšírenie pre Chrome ktorý integruje obrázky do súborov programu Excel, jednou z hlavných výziev je, ako zvládnuť vkladanie obrázkov do prostredia prehliadača. Na rozdiel od tradičných prostredí Node.js sa rozšírenia prehliadača Chrome dodávajú s ďalšími obmedzeniami zabezpečenia a výkonu, ktoré bránia priamemu prístupu k určitým rozhraniam API. To znamená, že metódy, ako je načítanie obrázkov pomocou knižníc, ako je Axios, môžu potrebovať alternatívy, aby boli v súlade s pravidlami prehliadača.

Riešenie pre prostredia prehliadača by mohlo zahŕňať použitie základ 64 zakódované obrázky namiesto nespracovaných binárnych údajov. Kódovanie Base64 umožňuje jednoducho prenášať a ukladať obrázky ako reťazec, ktorý je potom možné vložiť priamo do hárka programu Excel pomocou knižníc, ako je SheetJS. V tomto prípade kódovanie base64 pomáha prekonať bezpečnostné obmedzenia uložené prehliadačom Chrome, najmä preto, že rozšírenia nedokážu spustiť kód špecifický pre Node.js.

Ďalším dôležitým aspektom, ktorý je potrebné zvážiť, je manipulácia s veľkými súbormi obrazových údajov v súboroch programu Excel. Vloženie viacerých obrázkov do hárka programu Excel môže drasticky zväčšiť veľkosť súboru, čo môže ovplyvniť výkon, najmä v aplikácii založenej na prehliadači. Na optimalizáciu by vývojári mali používať komprimované obrazové formáty ako WebP alebo JPEG, aby sa minimalizovala veľkosť súboru a zároveň sa zabezpečilo, že kvalita obrazu zostane nedotknutá.