Brug af JavaScript i en Chrome-udvidelse til at indsætte billeder i Excel-celler

Indlejring af billeder i Excel-filer med JavaScript og SheetJS

Når du udvikler en Chrome-udvidelse, der genererer Excel-filer (.xlsx), kan det være en udfordrende opgave at integrere billeder direkte i celler. Mens JavaScript og biblioteker som SheetJS forenkler oprettelse og redigering af regneark, kræver håndtering af indlejrede billeder ofte mere specifik håndtering.

I mange tilfælde står udviklere over for den begrænsning, at de kun kan tilføje billedlinks til celler i stedet for at indlejre billederne direkte. Dette problem opstår på grund af kompleksiteten involveret i billeddatakonvertering og Excel-filformatering, især i et browsermiljø som Chrome-udvidelser.

I denne artikel vil vi udforske en løsning til at integrere billeder direkte i Excel-filceller ved hjælp af JavaScript. Billederne vil blive hentet fra HTML-elementer og indsat i de relevante Excel-celler, hvilket giver en mere problemfri oplevelse for brugere, der har brug for visuelle data i deres regneark.

Vi vil diskutere, hvordan man integrerer biblioteker som ExcelJS og tackler almindelige udfordringer såsom indlejring af billeder i et beskyttet Chrome-udvidelsesmiljø. Derudover vil vi gennemgå forskellene mellem Node.js og Chrome-udvidelsestilgange for at sikre en vellykket implementering.

Sådan indlejres billeder i Excel-celler ved hjælp af JavaScript og ExcelJS

Det script, jeg har leveret, løser problemet med at indlejre billeder direkte i Excel-celler ved hjælp af JavaScript, ExcelJS og Axios. Først starter scriptet med at initialisere en ny projektmappe ved hjælp af ExcelJS med kommandoen ExcelJS.Workbook(), som er grundlaget for at generere Excel-filer. Den opretter derefter et regneark ved at ringe addWorksheet(). Dette regneark fungerer som beholder for alle de data og billeder, der vil blive tilføjet. Eksempeldataene inkluderer billed-URL'er, som senere vil blive hentet og indlejret i specifikke celler.

For at håndtere billedhentningen bruger scriptet Axios-biblioteket med axios.get() at anmode om billeder fra deres URL'er. Axios henter billedet som binære data ved hjælp af responseType "arraybuffer", som er velegnet til at indlejre binært indhold som billeder i Excel-filen. Efter modtagelse af dataene konverteres billedet til et bufferformat, hvilket gør det muligt for ExcelJS at genkende det som et gyldigt billede til indlejring i en celle.

Når billedet er hentet og behandlet, vises kommandoen workbook.addImage() bruges til at indsætte billedet i projektmappen. Dette trin definerer billedet og forbereder det til at blive placeret et bestemt sted i regnearket. Efter dette, workheet.addImage() angiver, hvor billedet skal placeres, i dette tilfælde i kolonnen "B" i den aktuelle række. Rækkehøjden justeres for at sikre, at billedet passer godt ind i cellen.

Til sidst gemmer scriptet projektmappen vha workbook.xlsx.writeFile(), som skriver filen til det lokale system. Dette fuldender processen, hvilket resulterer i en Excel-fil med indlejrede billeder direkte i cellerne i stedet for blot links. Denne metode er yderst effektiv i tilfælde, hvor billeder skal inkluderes i rapporter eller dataark, hvilket giver en problemfri oplevelse for brugere, der interagerer med Excel-filer, der indeholder 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();

Optimering af billedindlejring i Excel-filer til Chrome-udvidelser

Når man udvikler en Chrome-udvidelse der integrerer billeder i Excel-filer, er en stor udfordring, hvordan man håndterer billedindlejring i et browsermiljø. I modsætning til traditionelle Node.js-miljøer kommer Chrome-udvidelser med yderligere sikkerheds- og ydeevnebegrænsninger, der forhindrer direkte adgang til visse API'er. Det betyder, at metoder som at hente billeder ved hjælp af biblioteker som Axios muligvis har brug for alternativer for at overholde browserpolitikker.

En løsning til browsermiljøer kunne involvere at bruge base64 kodede billeder i stedet for rå binære data. Base64-kodning gør det nemt at overføre billeder og lagre som en streng, som derefter kan indlejres direkte i et Excel-ark ved hjælp af biblioteker som SheetJS. I dette tilfælde hjælper base64-kodning med at overvinde de sikkerhedsbegrænsninger, som Chrome pålægger, især da udvidelser ikke kan udføre Node.js-specifik kode.

Et andet afgørende aspekt at overveje er håndteringen af ​​store billeddatasæt i Excel-filer. Indlejring af flere billeder i et Excel-ark kan øge filstørrelsen drastisk, hvilket kan påvirke ydeevnen, især i en browserbaseret applikation. For at optimere dette bør udviklere bruge komprimerede billedformater som WebP eller JPEG for at minimere filstørrelsen og samtidig sikre, at billedkvaliteten forbliver intakt.