JavaScripti kasutamine Chrome'i laienduses piltide lisamiseks Exceli lahtritesse

Kujutiste manustamine Exceli failidesse JavaScripti ja SheetJS-iga

Exceli (.xlsx) faile genereeriva Chrome'i laienduse arendamisel võib piltide manustamine otse lahtritesse olla keeruline ülesanne. Kuigi JavaScript ja teegid, nagu SheetJS, lihtsustavad arvutustabelite loomist ja redigeerimist, nõuab manustatud piltide käsitlemine sageli täpsemat käsitsemist.

Paljudel juhtudel seisavad arendajad silmitsi piiranguga, kuna neil on võimalik piltide otse manustamise asemel lisada lahtritesse ainult pildilinke. See probleem tuleneb pildiandmete teisendamise ja Exceli failivormingu keerukusest, eriti brauserikeskkonnas, nagu Chrome'i laiendused.

Selles artiklis uurime lahendust piltide manustamiseks otse Exceli faililahtritesse JavaScripti abil. Pildid tuuakse HTML-i elementidest ja sisestatakse sobivatesse Exceli lahtritesse, pakkudes sujuvamat kasutuskogemust kasutajatele, kes vajavad oma arvutustabelites visuaalseid andmeid.

Arutame, kuidas integreerida teeke, nagu ExcelJS, ja lahendada levinud väljakutseid, nagu piltide manustamine kaitstud Chrome'i laienduskeskkonda. Lisaks vaatame eduka juurutamise tagamiseks üle Node.js-i ja Chrome'i laienduse lähenemisviiside erinevused.

Kuidas manustada pilte Exceli lahtritesse JavaScripti ja ExcelJS-i abil

Minu pakutud skript lahendab kujutiste otse Exceli lahtritesse manustamise probleemi JavaScript, ExcelJS ja Axios. Esiteks algab skript uue töövihiku lähtestamisega ExcelJS-i abil käsuga ExcelJS. Töövihik(), mis on Exceli failide loomise aluseks. Seejärel loob see helistades töölehe addWorksheet(). See tööleht toimib kõigi lisatavate andmete ja piltide konteinerina. Näidisandmed sisaldavad piltide URL-e, mis hiljem tuuakse ja manustatakse konkreetsetesse lahtritesse.

Pildi toomise käsitlemiseks kasutab skript Axiose teeki koos axios.get() et taotleda pilte oma URL-idelt. Axios hangib pildi binaarandmetena, kasutades vastusetüüpi "massiivipuhver", mis sobib binaarse sisu, näiteks piltide manustamiseks Exceli faili. Pärast andmete saamist teisendatakse pilt puhvervormingusse, mis võimaldab ExcelJS-il tuvastada selle lahtrisse manustamiseks sobiva pildina.

Kui pilt on toodud ja töödeldud, käsk workbook.addImage() kasutatakse pildi sisestamiseks töövihikusse. See samm määratleb pildi ja valmistab selle ette töölehel kindlasse kohta paigutamiseks. Pärast seda, workheet.addImage() määrab, kuhu pilt tuleb paigutada, antud juhul praeguse rea veergu "B". Rea kõrgust reguleeritakse nii, et pilt mahuks hästi lahtrisse.

Lõpuks salvestab skript töövihiku kasutades workbook.xlsx.writeFile(), mis kirjutab faili kohalikku süsteemi. See viib protsessi lõpule, mille tulemuseks on Exceli fail, mille kujutised on manustatud otse lahtritesse, mitte ainult linke. See meetod on väga tõhus juhtudel, kui aruannetesse või andmelehtedesse tuleb lisada pilte, pakkudes sujuvat kogemust kasutajatele, kes suhtlevad nii andmeid kui ka visuaalseid elemente sisaldavate Exceli failidega.

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

Kujutiste manustamise optimeerimine Exceli failidesse Chrome'i laienduste jaoks

Arendades a Chrome'i laiendus mis integreerib pildid Exceli failidesse, on üks peamisi väljakutseid, kuidas käsitleda piltide manustamist brauseri keskkonnas. Erinevalt tavapärastest Node.js-i keskkondadest on Chrome'i laiendustel täiendavad turva- ja jõudluspiirangud, mis takistavad otsest juurdepääsu teatud API-dele. See tähendab, et sellised meetodid nagu piltide toomine teekide (nt Axios) abil võivad vajada brauseri eeskirjade järgimiseks alternatiive.

Brauserikeskkondade lahendus võib hõlmata kasutamist alus64 kodeeritud kujutised töötlemata binaarandmete asemel. Base64 kodeering võimaldab pilte hõlpsasti üle kanda ja stringina salvestada, mille saab seejärel otse Exceli lehele manustada, kasutades selliseid teeke nagu SheetJS. Sel juhul aitab base64 kodeering ületada Chrome'i seatud turvapiirangud, eriti kuna laiendused ei saa käivitada Node.js-spetsiifilist koodi.

Veel üks oluline aspekt, mida tuleb arvestada, on suurte pildiandmekogumite käsitlemine Exceli failides. Mitme pildi manustamine Exceli lehele võib faili suurust drastiliselt suurendada, mis võib mõjutada jõudlust, eriti brauseripõhises rakenduses. Selle optimeerimiseks peaksid arendajad kasutama tihendatud pildivorminguid, nagu WebP või JPEG, et minimeerida faili suurust, tagades samal ajal pildikvaliteedi muutumatuks.