Korištenje JavaScripta u proširenju za Chrome za umetanje slika u ćelije programa Excel

Ugrađivanje slika u Excel datoteke s JavaScriptom i SheetJS

Prilikom razvoja proširenja za Chrome koje generira Excel (.xlsx) datoteke, ugrađivanje slika izravno u ćelije može biti izazovan zadatak. Iako JavaScript i biblioteke poput SheetJS pojednostavljuju stvaranje i uređivanje proračunskih tablica, rukovanje ugrađenim slikama često zahtijeva specifičnije rukovanje.

U mnogim slučajevima, programeri se suočavaju s ograničenjem mogućnosti samo dodavanja poveznica na slike u ćelije umjesto izravnog ugrađivanja slika. Ovaj problem proizlazi iz složenosti uključene u pretvorbu slikovnih podataka i formatiranje Excel datoteke, osobito u okruženju preglednika kao što su proširenja za Chrome.

U ovom ćemo članku istražiti rješenje za ugrađivanje slika izravno u ćelije Excel datoteke pomoću JavaScripta. Slike će biti dohvaćene iz HTML elemenata i umetnute u odgovarajuće Excel ćelije, nudeći besprijekornije iskustvo za korisnike koji trebaju vizualne podatke unutar svojih proračunskih tablica.

Raspravljat ćemo o tome kako integrirati biblioteke kao što je ExcelJS i uhvatiti se u koštac s uobičajenim izazovima kao što je ugrađivanje slika u zaštićeno okruženje proširenja za Chrome. Osim toga, pregledat ćemo razlike između pristupa proširenjima Node.js i Chrome kako bismo osigurali uspješnu implementaciju.

Kako ugraditi slike u ćelije programa Excel koristeći JavaScript i ExcelJS

Skripta koju sam dao rješava problem ugrađivanja slika izravno u ćelije programa Excel JavaScript, ExcelJS i Axios. Prvo, skripta počinje inicijalizacijom nove radne knjige pomoću ExcelJS s naredbom ExcelJS.Radna knjiga(), koji je temelj za generiranje Excel datoteka. Zatim stvara radni list pozivom addWorksheet(). Ovaj radni list služi kao spremnik za sve podatke i slike koje će se dodati. Uzorak podataka uključuje URL-ove slika koji će se kasnije dohvatiti i ugraditi u određene ćelije.

Za rukovanje dohvaćanjem slike, skripta koristi biblioteku Axios sa axios.get() za traženje slika s njihovih URL-ova. Axios dohvaća sliku kao binarne podatke koristeći responseType "arraybuffer", koji je prikladan za ugrađivanje binarnog sadržaja poput slika u Excel datoteku. Nakon primitka podataka, slika se pretvara u format međuspremnika, što omogućuje ExcelJS-u da je prepozna kao valjanu sliku za ugradnju u ćeliju.

Nakon što je slika dohvaćena i obrađena, naredba radna knjiga.addImage() služi za umetanje slike u radnu bilježnicu. Ovaj korak definira sliku i priprema je za postavljanje na određeno mjesto unutar radnog lista. Nakon ovoga, radni list.addImage() određuje gdje se slika treba postaviti, u ovom slučaju u stupac "B" trenutnog reda. Visina reda se podešava kako bi se osiguralo da slika dobro stane unutar ćelije.

Na kraju, skripta sprema radnu knjigu pomoću radna knjiga.xlsx.writeFile(), koji zapisuje datoteku u lokalni sustav. Time je proces dovršen, što rezultira Excel datotekom s ugrađenim slikama izravno u ćelije, a ne samo vezama. Ova je metoda vrlo učinkovita u slučajevima kada je potrebno uključiti slike u izvješća ili podatkovne listove, pružajući besprijekorno iskustvo za korisnike u interakciji s Excel datotekama koje sadrže i podatke i 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 ugrađivanja slika u Excel datoteke za Chromeove ekstenzije

Prilikom razvoja a Chrome proširenje koji integrira slike u Excel datoteke, jedan veliki izazov je kako rukovati ugrađivanjem slika unutar okruženja preglednika. Za razliku od tradicionalnih Node.js okruženja, Chrome proširenja dolaze s dodatnim sigurnosnim ograničenjima i ograničenjima performansi koja sprječavaju izravan pristup određenim API-jima. To znači da će metode poput dohvaćanja slika pomoću biblioteka kao što je Axios možda trebati alternative kako bi bile u skladu s pravilima preglednika.

Rješenje za okruženja preglednika moglo bi uključivati ​​korištenje baza64 kodirane slike umjesto neobrađenih binarnih podataka. Kodiranje Base64 omogućuje jednostavan prijenos i pohranu slika kao niza, koji se zatim mogu ugraditi izravno u Excelov list pomoću biblioteka poput SheetJS. U ovom slučaju, kodiranje base64 pomaže u prevladavanju sigurnosnih ograničenja koja nameće Chrome, posebno zato što proširenja ne mogu izvršiti kôd specifičan za Node.js.

Drugi ključni aspekt koji treba uzeti u obzir je rukovanje velikim skupovima slikovnih podataka u Excel datotekama. Ugrađivanje više slika u Excel list može drastično povećati veličinu datoteke, što može utjecati na izvedbu, posebno u aplikaciji koja se temelji na pregledniku. Kako bi ovo optimizirali, programeri bi trebali koristiti komprimirane slikovne formate kao što su WebP ili JPEG kako bi smanjili veličinu datoteke, a pritom osigurali da kvaliteta slike ostane nepromijenjena.