Uporaba JavaScripta v razširitvi za Chrome za vstavljanje slik v Excelove celice

Vdelava slik v Excelove datoteke z JavaScriptom in SheetJS

Pri razvoju razširitve za Chrome, ki ustvarja datoteke Excel (.xlsx), je vdelava slik neposredno v celice lahko zahtevna naloga. Medtem ko JavaScript in knjižnice, kot je SheetJS, poenostavijo ustvarjanje in urejanje preglednic, je za ravnanje z vdelanimi slikami pogosto potrebno bolj specifično ravnanje.

V mnogih primerih se razvijalci soočajo z omejitvijo, da lahko samo dodajajo slikovne povezave v celice, namesto da bi neposredno vdelali slike. Ta težava izhaja iz zapletenosti pretvorbe slikovnih podatkov in oblikovanja datoteke Excel, zlasti v okolju brskalnika, kot so razširitve za Chrome.

V tem članku bomo raziskali rešitev za neposredno vdelavo slik v celice datoteke Excel z uporabo JavaScripta. Slike bodo pridobljene iz elementov HTML in vstavljene v ustrezne Excelove celice, kar bo ponudilo bolj brezhibno izkušnjo za uporabnike, ki potrebujejo vizualne podatke v svojih preglednicah.

Razpravljali bomo o tem, kako integrirati knjižnice, kot je ExcelJS, in se spopasti s pogostimi izzivi, kot je vdelava slik v zaščiteno okolje razširitev za Chrome. Poleg tega bomo pregledali razlike med pristopoma Node.js in razširitve za Chrome, da zagotovimo uspešno izvedbo.

Kako vdelati slike v Excelove celice z uporabo JavaScripta in ExcelJS

Skript, ki sem ga predložil, rešuje problem vdelave slik neposredno v Excelove celice z uporabo JavaScript, ExcelJS in Axios. Najprej se skript začne z inicializacijo novega delovnega zvezka z uporabo ExcelJS z ukazom ExcelJS.Workbook(), ki je osnova za ustvarjanje datotek Excel. Nato s klicem ustvari delovni list addWorksheet(). Ta delovni list deluje kot vsebnik za vse podatke in slike, ki bodo dodani. Vzorčni podatki vključujejo URL-je slik, ki bodo pozneje pridobljeni in vdelani v določene celice.

Za obdelavo pridobivanja slik skript uporablja knjižnico Axios s axios.get() zahtevati slike z njihovih URL-jev. Axios pridobi sliko kot binarne podatke z uporabo responseType "arraybuffer", ki je primeren za vdelavo binarne vsebine, kot so slike, v datoteko Excel. Po prejemu podatkov se slika pretvori v obliko vmesnega pomnilnika, kar omogoča, da jo ExcelJS prepozna kot veljavno sliko za vdelavo v celico.

Ko je slika pridobljena in obdelana, ukaz delovni zvezek.addImage() se uporablja za vstavljanje slike v delovni zvezek. Ta korak definira sliko in jo pripravi za postavitev na določeno mesto v delovnem listu. Po tem, worksheet.addImage() določa, kam naj bo slika postavljena, v tem primeru v stolpec "B" trenutne vrstice. Višina vrstice je prilagojena tako, da se slika dobro prilega celici.

Končno skript shrani delovni zvezek z uporabo workbook.xlsx.writeFile(), ki zapiše datoteko v lokalni sistem. S tem je postopek zaključen, rezultat pa je Excelova datoteka z vdelanimi slikami neposredno v celice in ne le s povezavami. Ta metoda je zelo učinkovita v primerih, ko je treba slike vključiti v poročila ali podatkovne liste, kar zagotavlja brezhibno izkušnjo za uporabnike, ki komunicirajo z Excelovimi datotekami, ki vsebujejo podatke in vizualne elemente.

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

Optimiziranje vdelave slik v Excelove datoteke za razširitve za Chrome

Pri razvoju a Razširitev za Chrome ki integrira slike v Excelove datoteke, je eden glavnih izzivov, kako ravnati z vdelavo slik v okolju brskalnika. Za razliko od tradicionalnih okolij Node.js imajo razširitve za Chrome dodatne varnostne in zmogljivostne omejitve, ki preprečujejo neposreden dostop do določenih API-jev. To pomeni, da metode, kot je pridobivanje slik z uporabo knjižnic, kot je Axios, morda potrebujejo alternative za skladnost s pravilniki brskalnika.

Rešitev za okolja brskalnika bi lahko vključevala uporabo base64 kodirane slike namesto neobdelanih binarnih podatkov. Kodiranje Base64 omogoča preprost prenos in shranjevanje slik kot niza, ki ga je mogoče nato vdelati neposredno v Excelov list s pomočjo knjižnic, kot je SheetJS. V tem primeru kodiranje base64 pomaga premagati varnostne omejitve, ki jih nalaga Chrome, zlasti ker razširitve ne morejo izvesti kode, specifične za Node.js.

Drugi ključni vidik, ki ga je treba upoštevati, je ravnanje z velikimi nizi slikovnih podatkov v Excelovih datotekah. Vdelava več slik v Excelov list lahko drastično poveča velikost datoteke, kar lahko vpliva na zmogljivost, zlasti v aplikaciji, ki temelji na brskalniku. Da bi to optimizirali, bi morali razvijalci uporabiti formate stisnjenih slik, kot sta WebP ali JPEG, da zmanjšajo velikost datoteke in hkrati zagotovijo, da kakovost slike ostane nedotaknjena.