Använda JavaScript i ett Chrome-tillägg för att infoga bilder i Excel-celler

Bädda in bilder i Excel-filer med JavaScript och SheetJS

När du utvecklar ett Chrome-tillägg som genererar Excel-filer (.xlsx) kan det vara en utmanande uppgift att bädda in bilder direkt i celler. Medan JavaScript och bibliotek som SheetJS förenklar att skapa och redigera kalkylblad, kräver hantering av inbäddade bilder ofta mer specifik hantering.

I många fall möter utvecklare begränsningen att bara kunna lägga till bildlänkar till celler istället för att bädda in bilderna direkt. Det här problemet beror på komplexiteten i bilddatakonvertering och Excel-filformatering, särskilt i en webbläsarmiljö som Chrome-tillägg.

I den här artikeln kommer vi att utforska en lösning för att bädda in bilder direkt i Excel-filceller med hjälp av JavaScript. Bilderna kommer att hämtas från HTML-element och infogas i lämpliga Excel-celler, vilket ger en mer sömlös upplevelse för användare som behöver visuell data i sina kalkylblad.

Vi kommer att diskutera hur man integrerar bibliotek som ExcelJS och tar itu med vanliga utmaningar som att bädda in bilder i en skyddad Chrome-tilläggsmiljö. Dessutom kommer vi att granska skillnaderna mellan Node.js och Chrome-tilläggsmetoder för att säkerställa en framgångsrik implementering.

Hur man bäddar in bilder i Excel-celler med JavaScript och ExcelJS

Skriptet jag har tillhandahållit löser problemet med att bädda in bilder direkt i Excel-celler med hjälp av JavaScript, ExcelJS och Axios. Först börjar skriptet med att initiera en ny arbetsbok med ExcelJS med kommandot ExcelJS.Workbook(), som är grunden för att generera Excel-filer. Den skapar sedan ett kalkylblad genom att anropa addWorksheet(). Detta kalkylblad fungerar som behållare för all data och bilder som kommer att läggas till. Exempeldatan inkluderar bildwebbadresser som senare kommer att hämtas och bäddas in i specifika celler.

För att hantera bildhämtningen använder skriptet Axios-biblioteket med axios.get() för att begära bilder från deras webbadresser. Axios hämtar bilden som binär data med hjälp av responseType "arraybuffer", som är lämplig för att bädda in binärt innehåll som bilder i Excel-filen. Efter att ha tagit emot data konverteras bilden till ett buffertformat, vilket gör att ExcelJS kan känna igen den som en giltig bild för inbäddning i en cell.

När bilden är hämtad och bearbetad, kommandot workbook.addImage() används för att infoga bilden i arbetsboken. Detta steg definierar bilden och förbereder den för att placeras på en specifik plats i kalkylbladet. Efter detta, workheet.addImage() anger var bilden ska placeras, i detta fall i kolumnen "B" i den aktuella raden. Radhöjden justeras för att säkerställa att bilden passar väl in i cellen.

Slutligen sparar skriptet arbetsboken med hjälp av workbook.xlsx.writeFile(), som skriver filen till det lokala systemet. Detta slutför processen, vilket resulterar i en Excel-fil med inbäddade bilder direkt i cellerna, snarare än bara länkar. Denna metod är mycket effektiv i fall där bilder måste inkluderas i rapporter eller datablad, vilket ger en sömlös upplevelse för användare som interagerar med Excel-filer som innehåller både data och visuella element.

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

Optimera bildinbäddning i Excel-filer för Chrome-tillägg

När man utvecklar en Chrome-tillägg som integrerar bilder i Excel-filer, en stor utmaning är hur man hanterar bildinbäddning i en webbläsarmiljö. Till skillnad från traditionella Node.js-miljöer kommer Chrome-tillägg med ytterligare säkerhets- och prestandabegränsningar som förhindrar direkt åtkomst till vissa API:er. Detta innebär att metoder som att hämta bilder med hjälp av bibliotek som Axios kan behöva alternativ för att följa webbläsarens policyer.

En lösning för webbläsarmiljöer kan innebära att använda bas64 kodade bilder istället för råa binära data. Base64-kodning gör att bilder enkelt kan överföras och lagras som en sträng, som sedan kan bäddas in direkt i ett Excel-ark med hjälp av bibliotek som SheetJS. I det här fallet hjälper base64-kodning till att övervinna säkerhetsbegränsningarna som Chrome har infört, särskilt eftersom tillägg inte kan exekvera Node.js-specifik kod.

En annan viktig aspekt att tänka på är hanteringen av stora bilddatauppsättningar i Excel-filer. Att bädda in flera bilder i ett Excel-ark kan drastiskt öka filstorleken, vilket kan påverka prestandan, särskilt i en webbläsarbaserad applikation. För att optimera detta bör utvecklare använda komprimerade bildformat som WebP eller JPEG för att minimera filstorleken samtidigt som bildkvaliteten förblir intakt.