Коришћење ЈаваСцрипт-а у проширењу за Цхроме за уметање слика у Екцел ћелије

Уграђивање слика у Екцел датотеке помоћу ЈаваСцрипт-а и СхеетЈС-а

Када развијате проширење за Цхроме које генерише Екцел (.клск) датотеке, уграђивање слика директно у ћелије може бити изазован задатак. Док ЈаваСцрипт и библиотеке као што је СхеетЈС поједностављују креирање и уређивање табела, руковање уграђеним сликама често захтева конкретније руковање.

У многим случајевима, програмери се суочавају са ограничењем да могу само да додају везе слика ћелијама уместо да директно уграђују слике. Овај проблем произилази из сложености укључених у конверзију сликовних података и форматирање Екцел датотека, посебно у окружењу претраживача као што су проширења за Цхроме.

У овом чланку ћемо истражити решење за уграђивање слика директно у ћелије Екцел датотеке користећи ЈаваСцрипт. Слике ће бити преузете из ХТМЛ елемената и уметнуте у одговарајуће Екцел ћелије, нудећи беспрекорније искуство за кориснике којима су потребни визуелни подаци у њиховим табелама.

Разговараћемо о томе како да интегришемо библиотеке као што је ЕкцелЈС и да се позабавимо уобичајеним изазовима као што је уграђивање слика у заштићено окружење Цхроме проширења. Поред тога, прегледаћемо разлике између приступа Ноде.јс и Цхроме проширења да бисмо обезбедили успешну примену.

Како уградити слике у Екцел ћелије користећи ЈаваСцрипт и ЕкцелЈС

Скрипта коју сам дао решава проблем уграђивања слика директно у Екцел ћелије помоћу ЈаваСцрипт, ЕкцелЈС и Акиос. Прво, скрипта почиње иницијализацијом нове радне свеске користећи ЕкцелЈС са командом ЕкцелЈС.Воркбоок(), који је основа за генерисање Екцел датотека. Затим креира радни лист позивањем аддВорксхеет(). Овај радни лист служи као контејнер за све податке и слике које ће бити додате. Пример података укључује УРЛ адресе слика које ће касније бити преузете и уграђене у одређене ћелије.

За управљање преузимањем слике, скрипта користи Акиос библиотеку са акиос.гет() да захтевају слике са њихових УРЛ адреса. Акиос преузима слику као бинарне податке користећи респонсеТипе "арраибуффер", који је погодан за уграђивање бинарног садржаја попут слика у Екцел датотеку. Након пријема података, слика се конвертује у формат бафера, омогућавајући ЕкцелЈС-у да је препозна као исправну слику за уградњу у ћелију.

Када се слика преузме и обради, команда радна свеска.аддИмаге() служи за уметање слике у радну свеску. Овај корак дефинише слику и припрема је за постављање на одређену локацију унутар радног листа. Након овога, радни лист.аддИмаге() одређује где треба да се постави слика, у овом случају у колони "Б" тренутног реда. Висина реда се подешава како би се осигурало да се слика добро уклапа у ћелију.

Коначно, скрипта чува радну свеску користећи радна свеска.клск.вритеФиле(), који уписује датотеку у локални систем. Ово завршава процес, што резултира Екцел датотеком са уграђеним сликама директно у ћелије, а не само везама. Овај метод је веома ефикасан у случајевима када слике треба да буду укључене у извештаје или листове са подацима, пружајући корисницима беспрекорно искуство у интеракцији са Екцел датотекама које садрже и податке и визуелне елементе.

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

Оптимизација уграђивања слике у Екцел датотеке за Цхроме екстензије

Приликом развоја а Цхроме додатак који интегрише слике у Екцел датотеке, један од главних изазова је како се носити са уграђивањем слика у окружење претраживача. За разлику од традиционалних Ноде.јс окружења, Цхроме екстензије долазе са додатним ограничењима безбедности и перформанси која спречавају директан приступ одређеним АПИ-јима. То значи да ће методе попут преузимања слика помоћу библиотека као што је Акиос можда требати алтернативе да би се ускладиле са смерницама претраживача.

Решење за окружења претраживача може укључивати коришћење басе64 кодиране слике уместо сирових бинарних података. Басе64 кодирање омогућава да се слике лако преносе и чувају као стринг, који се затим може уградити директно у Екцел лист користећи библиотеке као што је СхеетЈС. У овом случају, басе64 кодирање помаже да се превазиђу безбедносна ограничења која намеће Цхроме, посебно зато што екстензије не могу да изврше код специфичан за Ноде.јс.

Још један кључни аспект који треба узети у обзир је руковање великим скуповима података слика у Екцел датотекама. Уграђивање више слика у Екцел лист може драстично повећати величину датотеке, што може утицати на перформансе, посебно у апликацијама заснованим на претраживачу. Да би ово оптимизовали, програмери би требало да користе компримоване формате слика као што су ВебП или ЈПЕГ да би минимизирали величину датотеке, а да притом квалитет слике остане нетакнут.