JavaScript használata egy Chrome-bővítményben képek beszúrásához Excel cellákba

Képek beágyazása Excel-fájlokba JavaScript és SheetJS segítségével

Excel (.xlsx) fájlokat generáló Chrome-bővítmény fejlesztésekor a képek közvetlenül a cellákba ágyazása kihívást jelenthet. Míg a JavaScript és az olyan könyvtárak, mint a SheetJS, leegyszerűsítik a táblázatok létrehozását és szerkesztését, a beágyazott képek kezelése gyakran specifikusabb kezelést igényel.

Sok esetben a fejlesztők azzal a korláttal szembesülnek, hogy csak képhivatkozásokat adhatnak hozzá a cellákhoz, nem pedig közvetlenül beágyazhatják a képeket. Ez a probléma a képadatok átalakítása és az Excel-fájlformázás bonyolultságából adódik, különösen olyan böngészőkörnyezetben, mint a Chrome-bővítmények.

Ebben a cikkben egy olyan megoldást vizsgálunk meg, amellyel közvetlenül az Excel fájl celláiba ágyazhatók be a képek JavaScript használatával. A képeket HTML-elemekből kérik le, és a megfelelő Excel cellákba illesztik be, így zökkenőmentesebb élményt kínálnak azoknak a felhasználóknak, akiknek vizuális adatokra van szükségük a táblázataikban.

Megbeszéljük, hogyan integrálhatunk olyan könyvtárakat, mint az ExcelJS, és hogyan kezeljük az olyan gyakori kihívásokat, mint például a képek beágyazása egy védett Chrome-bővítménykörnyezetbe. Ezenkívül áttekintjük a Node.js és a Chrome-bővítmények közötti különbségeket a sikeres megvalósítás érdekében.

Képek beágyazása Excel cellákba JavaScript és ExcelJS használatával

Az általam biztosított szkript megoldja a képek közvetlenül az Excel cellákba való beágyazásának problémáját JavaScript, ExcelJS és Axios. Először a szkript egy új munkafüzet inicializálásával indul ExcelJS használatával a paranccsal ExcelJS.Workbook(), amely az Excel fájlok létrehozásának alapja. Ezután hívással létrehoz egy munkalapot addWorksheet(). Ez a munkalap az összes hozzáadandó adat és kép tárolójaként működik. A mintaadatok képek URL-jeit tartalmazzák, amelyeket később lekérnek, és bizonyos cellákba ágyaznak be.

A képlekéréshez a szkript az Axios könyvtárat használja axios.get() hogy képeket kérjenek az URL-jükről. Az Axios bináris adatként kéri le a képet a responseType "arraybuffer" használatával, amely alkalmas bináris tartalom, például képek beágyazására az Excel fájlba. Az adatok beérkezése után a kép pufferformátumba kerül, így az ExcelJS képes felismerni azt, mint egy cellába való beágyazást.

A kép lekérése és feldolgozása után a parancs workbook.addImage() a kép beillesztésére szolgál a munkafüzetbe. Ez a lépés meghatározza a képet, és előkészíti a munkalap egy meghatározott helyére történő elhelyezésre. Ezt követően, workheet.addImage() megadja, hogy a kép hova kerüljön, ebben az esetben az aktuális sor "B" oszlopában. A sor magassága úgy van beállítva, hogy a kép jól illeszkedjen a cellába.

Végül a szkript elmenti a munkafüzetet a segítségével workbook.xlsx.writeFile(), amely a fájlt a helyi rendszerbe írja. Ez befejezi a folyamatot, és egy Excel-fájlt kap, amely közvetlenül a cellákba ágyazott képekkel rendelkezik, nem csupán hivatkozásokat. Ez a módszer rendkívül hatékony azokban az esetekben, amikor képeket kell szerepeltetni a jelentésekben vagy adatlapokban, zökkenőmentes élményt biztosítva az adatokat és vizuális elemeket egyaránt tartalmazó Excel-fájlokkal kezelő felhasználók számára.

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

A képbeágyazás optimalizálása Excel-fájlokba a Chrome-bővítményekhez

Kidolgozásakor a Chrome bővítmény amely integrálja a képeket Excel-fájlokba, az egyik legnagyobb kihívás a képbeágyazás kezelése böngésző környezetben. A hagyományos Node.js környezetektől eltérően a Chrome-bővítmények további biztonsági és teljesítménykorlátozásokkal rendelkeznek, amelyek megakadályozzák a közvetlen hozzáférést bizonyos API-khoz. Ez azt jelenti, hogy az olyan módszereknek, mint a képek lekérése olyan könyvtárak használatával, mint például az Axios, alternatívákra lehet szükség a böngésző szabályzatainak való megfeleléshez.

A böngészőkörnyezetek megoldása magában foglalhatja a használatát alap64 kódolt képek a nyers bináris adatok helyett. A Base64 kódolás lehetővé teszi a képek egyszerű átvitelét és sztringként való tárolását, amelyet aztán közvetlenül beágyazhat egy Excel-lapba olyan könyvtárak segítségével, mint a SheetJS. Ebben az esetben a base64 kódolás segít leküzdeni a Chrome által támasztott biztonsági korlátokat, különösen azért, mert a bővítmények nem tudják végrehajtani a Node.js-specifikus kódot.

Egy másik lényeges szempont, amelyet figyelembe kell venni, a nagy képadat-készletek kezelése Excel-fájlokban. Több kép beágyazása egy Excel-lapba drasztikusan megnövelheti a fájl méretét, ami befolyásolhatja a teljesítményt, különösen böngészőalapú alkalmazások esetén. Ennek optimalizálása érdekében a fejlesztőknek olyan tömörített képformátumokat kell használniuk, mint a WebP vagy a JPEG, hogy minimalizálják a fájlméretet, miközben biztosítják a képminőség sértetlenségét.