„JavaScript“ naudojimas „Chrome“ plėtinyje vaizdams įterpti į „Excel“ langelius

Vaizdų įterpimas į „Excel“ failus su „JavaScript“ ir „SheetJS“.

Kuriant „Chrome“ plėtinį, generuojantį „Excel“ (.xlsx) failus, vaizdų įterpimas tiesiai į langelius gali būti sudėtinga užduotis. Nors „JavaScript“ ir bibliotekos, pvz., „SheetJS“, supaprastina skaičiuoklių kūrimą ir redagavimą, tvarkyti įterptus vaizdus dažnai reikia konkretesnio tvarkymo.

Daugeliu atvejų kūrėjai susiduria su apribojimu, nes jie gali pridėti tik vaizdo nuorodas į langelius, o ne tiesiogiai įterpti vaizdus. Ši problema kyla dėl vaizdo duomenų konvertavimo ir „Excel“ failų formatavimo sudėtingumo, ypač naršyklės aplinkoje, pvz., „Chrome“ plėtiniuose.

Šiame straipsnyje mes išnagrinėsime sprendimą, kaip įterpti vaizdus tiesiai į "Excel" failo langelius naudojant "JavaScript". Vaizdai bus paimti iš HTML elementų ir įterpti į atitinkamus „Excel“ langelius, todėl naudotojai, kuriems reikia vaizdinių duomenų skaičiuoklėse, bus sklandesni.

Aptarsime, kaip integruoti tokias bibliotekas kaip „ExcelJS“, ir spręsti įprastas problemas, pvz., vaizdų įterpimą į apsaugotą „Chrome“ plėtinio aplinką. Be to, norėdami užtikrinti sėkmingą diegimą, peržiūrėsime Node.js ir „Chrome“ plėtinių metodų skirtumus.

Kaip įterpti vaizdus į „Excel“ langelius naudojant „JavaScript“ ir „ExcelJS“.

Mano pateiktas scenarijus išsprendžia vaizdų įterpimo tiesiai į „Excel“ ląsteles problemą JavaScript, ExcelJS ir Axios. Pirma, scenarijus pradedamas inicijuojant naują darbaknygę naudojant ExcelJS su komanda ExcelJS.Workbook(), kuri yra „Excel“ failų generavimo pagrindas. Tada skambinant sukuriamas darbalapis addWorksheet(). Šis darbalapis veikia kaip visų duomenų ir vaizdų, kurie bus įtraukti, konteineris. Pavyzdiniai duomenys apima vaizdų URL, kurie vėliau bus gauti ir įterpti į konkrečius langelius.

Norėdami apdoroti vaizdo gavimą, scenarijus naudoja Axios biblioteką su axios.get() prašyti vaizdų iš jų URL. „Axios“ nuskaito vaizdą kaip dvejetainius duomenis naudodama „responseType“ „masyvo buferį“, kuris tinka dvejetainiam turiniui, pvz., vaizdams, įterpti į „Excel“ failą. Gavus duomenis, vaizdas konvertuojamas į buferinį formatą, leidžiantį ExcelJS atpažinti jį kaip tinkamą įterpti į langelį vaizdą.

Kai vaizdas yra paimtas ir apdorojamas, komanda workbook.addImage() naudojamas paveikslėliui įterpti į darbaknygę. Šis veiksmas apibrėžia vaizdą ir paruošia jį įdėti į tam tikrą darbalapio vietą. Po to workheet.addImage() nurodo, kur turi būti vaizdas, šiuo atveju dabartinės eilutės stulpelyje "B". Eilutės aukštis reguliuojamas taip, kad vaizdas gerai tilptų langelyje.

Galiausiai scenarijus išsaugo darbaknygę naudodamas workbook.xlsx.writeFile(), kuri įrašo failą į vietinę sistemą. Tai užbaigia procesą, o „Excel“ failas su įterptais vaizdais tiesiai į langelius, o ne tik nuorodomis. Šis metodas yra labai efektyvus tais atvejais, kai į ataskaitas arba duomenų lapus reikia įtraukti vaizdus, ​​​​kad naudotojai galėtų sklandžiai bendrauti su „Excel“ failais, kuriuose yra ir duomenų, ir vaizdinių 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();

Vaizdo įterpimo į „Excel“ failus optimizavimas „Chrome“ plėtiniams

Kuriant a Chrome plėtinys Integruojant vaizdus į „Excel“ failus, vienas pagrindinių iššūkių yra tvarkyti vaizdų įterpimą naršyklės aplinkoje. Skirtingai nuo tradicinių Node.js aplinkos, „Chrome“ plėtiniuose yra papildomų saugos ir našumo apribojimų, kurie neleidžia tiesiogiai pasiekti tam tikrų API. Tai reiškia, kad tokiems metodams kaip vaizdų gavimas naudojant bibliotekas, pvz., „Axios“, gali prireikti alternatyvų, kad būtų laikomasi naršyklės politikos.

Naršyklės aplinkos sprendimas gali apimti naudojimą bazė64 užkoduoti vaizdai vietoj neapdorotų dvejetainių duomenų. „Base64“ kodavimas leidžia lengvai perkelti vaizdus ir saugoti juos kaip eilutę, kurią vėliau galima įterpti tiesiai į „Excel“ lapą naudojant tokias bibliotekas kaip „SheetJS“. Šiuo atveju base64 kodavimas padeda įveikti Chrome keliamus saugumo apribojimus, juolab, kad plėtiniai negali vykdyti Node.js specifinio kodo.

Kitas svarbus aspektas, į kurį reikia atsižvelgti, yra didelių vaizdų duomenų rinkinių tvarkymas „Excel“ failuose. Kelių vaizdų įterpimas į „Excel“ lapą gali smarkiai padidinti failo dydį, o tai gali turėti įtakos našumui, ypač naudojant naršyklę. Norėdami tai optimizuoti, kūrėjai turėtų naudoti suglaudintus vaizdo formatus, pvz., WebP arba JPEG, kad sumažintų failo dydį ir užtikrintų, kad vaizdo kokybė išliktų nepakitusi.