Bruke JavaScript i en Chrome-utvidelse for å sette inn bilder i Excel-celler

Bygge inn bilder i Excel-filer med JavaScript og SheetJS

Når du utvikler en Chrome-utvidelse som genererer Excel-filer (.xlsx), kan det være en utfordrende oppgave å bygge inn bilder direkte i celler. Mens JavaScript og biblioteker som SheetJS forenkler oppretting og redigering av regneark, krever håndtering av innebygde bilder ofte mer spesifikk håndtering.

I mange tilfeller står utviklere overfor begrensningen av å bare kunne legge til bildelenker til celler i stedet for å bygge inn bildene direkte. Dette problemet oppstår på grunn av kompleksiteten involvert i konvertering av bildedata og Excel-filformatering, spesielt i et nettlesermiljø som Chrome-utvidelser.

I denne artikkelen vil vi utforske en løsning for å bygge inn bilder direkte i Excel-filceller ved hjelp av JavaScript. Bildene vil bli hentet fra HTML-elementer og satt inn i de riktige Excel-cellene, og gir en mer sømløs opplevelse for brukere som trenger visuelle data i regnearkene sine.

Vi vil diskutere hvordan man integrerer biblioteker som ExcelJS og takler vanlige utfordringer som å bygge inn bilder i et beskyttet Chrome-utvidelsesmiljø. I tillegg vil vi se på forskjellene mellom Node.js og Chrome-utvidelsestilnærminger for å sikre en vellykket implementering.

Slik bygger du inn bilder i Excel-celler ved hjelp av JavaScript og ExcelJS

Skriptet jeg har gitt løser problemet med å bygge inn bilder direkte i Excel-celler ved å bruke JavaScript, ExcelJS og Axios. Først starter skriptet med å initialisere en ny arbeidsbok ved hjelp av ExcelJS med kommandoen ExcelJS.Workbook(), som er grunnlaget for å generere Excel-filer. Den lager deretter et regneark ved å ringe addWorksheet(). Dette regnearket fungerer som beholderen for alle dataene og bildene som vil bli lagt til. Eksempeldataene inkluderer bildenettadresser som senere vil bli hentet og innebygd i bestemte celler.

For å håndtere bildehentingen bruker skriptet Axios-biblioteket med axios.get() for å be om bilder fra nettadressene deres. Axios henter bildet som binære data ved å bruke responseType "arraybuffer", som er egnet for å bygge inn binært innhold som bilder i Excel-filen. Etter å ha mottatt dataene, konverteres bildet til et bufferformat, slik at ExcelJS kan gjenkjenne det som et gyldig bilde for innbygging i en celle.

Når bildet er hentet og behandlet, vil kommandoen workbook.addImage() brukes til å sette inn bildet i arbeidsboken. Dette trinnet definerer bildet og forbereder det til å plasseres på et bestemt sted i regnearket. Etter dette, workheet.addImage() angir hvor bildet skal plasseres, i dette tilfellet i kolonnen "B" i gjeldende rad. Radhøyden justeres for å sikre at bildet passer godt inn i cellen.

Til slutt lagrer skriptet arbeidsboken ved hjelp av workbook.xlsx.writeFile(), som skriver filen til det lokale systemet. Dette fullfører prosessen, og resulterer i en Excel-fil med innebygde bilder direkte i cellene, i stedet for bare lenker. Denne metoden er svært effektiv i tilfeller der bilder må inkluderes i rapporter eller dataark, og gir en sømløs opplevelse for brukere som samhandler med Excel-filer som inneholder både data og visuelle elementer.

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

Optimalisering av bildeinnbygging i Excel-filer for Chrome-utvidelser

Når du utvikler en Chrome-utvidelse som integrerer bilder i Excel-filer, er en stor utfordring hvordan man håndterer bildeinnbygging i et nettlesermiljø. I motsetning til tradisjonelle Node.js-miljøer, kommer Chrome-utvidelser med ytterligere sikkerhets- og ytelsesbegrensninger som forhindrer direkte tilgang til visse APIer. Dette betyr at metoder som å hente bilder ved hjelp av biblioteker som Axios kan trenge alternativer for å overholde nettleserpolicyene.

En løsning for nettlesermiljøer kan innebære bruk base64 kodede bilder i stedet for rå binære data. Base64-koding lar bilder enkelt overføres og lagres som en streng, som deretter kan bygges inn direkte i et Excel-ark ved hjelp av biblioteker som SheetJS. I dette tilfellet hjelper base64-koding med å overvinne sikkerhetsbegrensningene som er pålagt av Chrome, spesielt siden utvidelser ikke kan kjøre Node.js-spesifikk kode.

Et annet viktig aspekt å vurdere er håndteringen av store bildedatasett i Excel-filer. Å bygge inn flere bilder i et Excel-ark kan drastisk øke filstørrelsen, noe som kan påvirke ytelsen, spesielt i et nettleserbasert program. For å optimalisere dette, bør utviklere bruke komprimerte bildeformater som WebP eller JPEG for å minimere filstørrelsen samtidig som bildekvaliteten forblir intakt.