JavaScriptin käyttäminen Chrome-laajennuksessa kuvien lisäämiseen Excelin soluihin

Kuvien upottaminen Excel-tiedostoihin JavaScriptin ja SheetJS:n avulla

Kun kehitetään Excel (.xlsx) -tiedostoja luovaa Chrome-laajennusta, kuvien upottaminen suoraan soluihin voi olla haastava tehtävä. Vaikka JavaScript ja kirjastot, kuten SheetJS, yksinkertaistavat laskentataulukoiden luomista ja muokkaamista, upotettujen kuvien käsittely vaatii usein tarkempaa käsittelyä.

Monissa tapauksissa kehittäjät kohtaavat rajoituksena vain lisätä kuvalinkkejä soluihin sen sijaan, että upottaisivat kuvat suoraan. Tämä ongelma johtuu kuvatietojen muuntamisen ja Excel-tiedostomuotoilun monimutkaisuudesta, erityisesti selainympäristössä, kuten Chrome-laajennuksissa.

Tässä artikkelissa tutkimme ratkaisua upottaa kuvat suoraan Excel-tiedostosoluihin JavaScriptin avulla. Kuvat haetaan HTML-elementeistä ja lisätään sopiviin Excel-soluihin, mikä tarjoaa saumattomamman kokemuksen käyttäjille, jotka tarvitsevat visuaalista dataa laskentataulukoissaan.

Keskustelemme siitä, kuinka integroida kirjastoja, kuten ExcelJS, ja käsitellä yleisiä haasteita, kuten kuvien upottaminen suojattuun Chrome-laajennusympäristöön. Lisäksi tarkastelemme Node.js:n ja Chromen laajennusmenetelmien väliset erot onnistuneen toteutuksen varmistamiseksi.

Kuvien upottaminen Excelin soluihin JavaScriptin ja ExcelJS:n avulla

Toimittamani skripti ratkaisee ongelman, joka liittyy kuvien upottamiseen suoraan Excel-soluihin JavaScript, ExcelJS ja Axios. Ensin komentosarja alkaa alustamalla uusi työkirja ExcelJS-komennolla ExcelJS.Työkirja(), joka on perusta Excel-tiedostojen luomiselle. Sitten se luo laskentataulukon soittamalla addWorksheet(). Tämä laskentataulukko toimii säilönä kaikille lisättäville tiedoille ja kuville. Esimerkkitiedot sisältävät kuvien URL-osoitteita, jotka myöhemmin haetaan ja upotetaan tiettyihin soluihin.

Käsittelemään kuvien noutoa komentosarja käyttää Axios-kirjastoa axios.get() pyytää kuvia URL-osoitteistaan. Axios hakee kuvan binääritietona käyttämällä vastaustyyppiä "arraybuffer", joka sopii binaarisisällön, kuten kuvien, upottamiseen Excel-tiedostoon. Tietojen vastaanottamisen jälkeen kuva muunnetaan puskurimuotoon, jolloin ExcelJS tunnistaa sen kelvolliseksi soluun upotettavaksi kuvaksi.

Kun kuva on haettu ja käsitelty, komento workbook.addImage() käytetään kuvan lisäämiseen työkirjaan. Tämä vaihe määrittää kuvan ja valmistelee sen sijoitettavaksi tiettyyn paikkaan laskentataulukossa. Tämän jälkeen workheet.addImage() määrittää, minne kuva sijoitetaan, tässä tapauksessa nykyisen rivin sarakkeeseen "B". Rivin korkeutta säädetään niin, että kuva mahtuu hyvin soluun.

Lopuksi skripti tallentaa työkirjan käyttämällä workbook.xlsx.writeFile(), joka kirjoittaa tiedoston paikalliseen järjestelmään. Tämä viimeistelee prosessin, ja tuloksena on Excel-tiedosto, jossa on upotetut kuvat suoraan soluihin pelkkien linkkien sijaan. Tämä menetelmä on erittäin tehokas tapauksissa, joissa kuvia on sisällytettävä raportteihin tai tietosivuihin, mikä tarjoaa saumattoman kokemuksen käyttäjille, jotka käyttävät Excel-tiedostoja, jotka sisältävät sekä dataa että visuaalisia elementtejä.

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

Kuvien upottamisen optimointi Excel-tiedostoihin Chrome-laajennuksia varten

Kun kehitetään a Chromen laajennus joka integroi kuvat Excel-tiedostoihin, yksi suuri haaste on kuvien upottaminen selainympäristössä. Toisin kuin perinteiset Node.js-ympäristöt, Chrome-laajennuksissa on lisäturva- ja suorituskykyrajoituksia, jotka estävät suoran pääsyn tiettyihin sovellusliittymiin. Tämä tarkoittaa, että menetelmät, kuten kuvien hakeminen Axiosin kaltaisten kirjastojen avulla, saattavat tarvita vaihtoehtoja selainkäytäntöjen noudattamiseksi.

Ratkaisu selainympäristöihin voisi sisältää käytön base64 koodattuja kuvia raakabinaaridatan sijaan. Base64-koodaus mahdollistaa kuvien helpon siirron ja tallentamisen merkkijonona, joka voidaan sitten upottaa suoraan Excel-arkkiin käyttämällä kirjastoja, kuten SheetJS. Tässä tapauksessa base64-koodaus auttaa voittamaan Chromen asettamat tietoturvarajoitukset, varsinkin kun laajennukset eivät voi suorittaa Node.js-kohtaista koodia.

Toinen tärkeä huomioitava näkökohta on suurten kuvatietojoukkojen käsittely Excel-tiedostoissa. Useiden kuvien upottaminen Excel-taulukkoon voi suurentaa tiedoston kokoa huomattavasti, mikä voi vaikuttaa suorituskykyyn erityisesti selainpohjaisissa sovelluksissa. Tämän optimoimiseksi kehittäjien tulisi käyttää pakattuja kuvamuotoja, kuten WebP tai JPEG, minimoimaan tiedostokoko ja varmistamaan samalla, että kuvan laatu pysyy ennallaan.