JavaScript izmantošana Chrome paplašinājumā, lai ievietotu attēlus Excel šūnās

Attēlu iegulšana Excel failos, izmantojot JavaScript un SheetJS

Izstrādājot Chrome paplašinājumu, kas ģenerē Excel (.xlsx) failus, attēlu iegulšana tieši šūnās var būt sarežģīts uzdevums. Lai gan JavaScript un bibliotēkas, piemēram, SheetJS, vienkāršo izklājlapu izveidi un rediģēšanu, iegulto attēlu apstrādei bieži ir nepieciešama specifiskāka apstrāde.

Daudzos gadījumos izstrādātāji saskaras ar ierobežojumu, kas var tikai pievienot attēlu saites šūnām, nevis tieši iegult attēlus. Šo problēmu rada sarežģītība, kas saistīta ar attēlu datu konvertēšanu un Excel failu formatēšanu, jo īpaši pārlūkprogrammas vidē, piemēram, Chrome paplašinājumos.

Šajā rakstā mēs izpētīsim risinājumu attēlu iegulšanai tieši Excel failu šūnās, izmantojot JavaScript. Attēli tiks izgūti no HTML elementiem un ievietoti attiecīgajās Excel šūnās, piedāvājot vienkāršāku pieredzi lietotājiem, kuriem izklājlapās ir nepieciešami vizuāli dati.

Mēs apspriedīsim, kā integrēt bibliotēkas, piemēram, ExcelJS, un risināt bieži sastopamas problēmas, piemēram, attēlu iegulšanu aizsargātā Chrome paplašinājuma vidē. Turklāt mēs pārskatīsim atšķirības starp Node.js un Chrome paplašinājumu pieejām, lai nodrošinātu veiksmīgu ieviešanu.

Kā iegult attēlus Excel šūnās, izmantojot JavaScript un ExcelJS

Manis nodrošinātais skripts atrisina problēmu, kas saistīta ar attēlu iegulšanu tieši Excel šūnās, izmantojot JavaScript, ExcelJS un Axios. Pirmkārt, skripts sākas, inicializējot jaunu darbgrāmatu, izmantojot ExcelJS ar komandu ExcelJS.Darbgrāmata(), kas ir Excel failu ģenerēšanas pamats. Pēc tam tas izveido darblapu, zvanot addWorksheet(). Šī darblapa darbojas kā konteiners visiem datiem un attēliem, kas tiks pievienoti. Datu paraugi ietver attēlu vietrāžus URL, kas vēlāk tiks izgūti un iegulti noteiktās šūnās.

Lai apstrādātu attēla ienesi, skripts izmanto Axios bibliotēku ar axios.get() lai pieprasītu attēlus no saviem URL. Axios izgūst attēlu kā bināros datus, izmantojot atbildes veidu "masīva buferis", kas ir piemērots bināra satura, piemēram, attēlu, iegulšanai Excel failā. Pēc datu saņemšanas attēls tiek pārveidots bufera formātā, ļaujot ExcelJS atpazīt to kā derīgu attēlu iegulšanai šūnā.

Kad attēls ir ielādēts un apstrādāts, komanda workbook.addImage() tiek izmantots, lai ievietotu attēlu darbgrāmatā. Šī darbība nosaka attēlu un sagatavo to ievietošanai noteiktā vietā darblapā. Pēc šī workheet.addImage() norāda, kur attēls jānovieto, šajā gadījumā pašreizējās rindas kolonnā "B". Rindas augstums ir pielāgots, lai nodrošinātu, ka attēls labi iekļaujas šūnā.

Visbeidzot, skripts saglabā darbgrāmatu, izmantojot darbgrāmata.xlsx.writeFile(), kas ieraksta failu lokālajā sistēmā. Tas pabeidz procesu, kā rezultātā tiek izveidots Excel fails ar iegultiem attēliem tieši šūnās, nevis tikai saitēm. Šī metode ir ļoti efektīva gadījumos, kad pārskatos vai datu lapās ir jāiekļauj attēli, nodrošinot nevainojamu pieredzi lietotājiem, kuri mijiedarbojas ar Excel failiem, kas satur gan datus, gan vizuālos elementus.

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

Attēlu iegulšanas optimizēšana Excel failos Chrome paplašinājumiem

Izstrādājot a Chrome paplašinājums kas integrē attēlus Excel failos, viens no galvenajiem izaicinājumiem ir tas, kā pārlūkprogrammas vidē rīkoties ar attēlu iegulšanu. Atšķirībā no tradicionālajām Node.js vidēm, Chrome paplašinājumiem ir papildu drošības un veiktspējas ierobežojumi, kas neļauj tiešu piekļuvi noteiktiem API. Tas nozīmē, ka tādām metodēm kā attēlu iegūšana, izmantojot bibliotēkas, piemēram, Axios, var būt vajadzīgas alternatīvas, lai nodrošinātu atbilstību pārlūkprogrammas politikām.

Risinājums pārlūkprogrammu vidēm varētu ietvert izmantošanu bāze64 kodēti attēli neapstrādātu bināro datu vietā. Base64 kodējums ļauj viegli pārsūtīt un saglabāt attēlus kā virkni, ko pēc tam var iegult tieši Excel lapā, izmantojot tādas bibliotēkas kā SheetJS. Šajā gadījumā base64 kodējums palīdz pārvarēt Chrome noteiktos drošības ierobežojumus, jo īpaši tāpēc, ka paplašinājumi nevar izpildīt Node.js raksturīgo kodu.

Vēl viens svarīgs aspekts, kas jāņem vērā, ir lielu attēlu datu kopu apstrāde Excel failos. Vairāku attēlu iegulšana Excel lapā var ievērojami palielināt faila lielumu, kas var ietekmēt veiktspēju, īpaši pārlūkprogrammā. Lai to optimizētu, izstrādātājiem ir jāizmanto saspiesti attēlu formāti, piemēram, WebP vai JPEG, lai samazinātu faila lielumu, vienlaikus nodrošinot nemainīgu attēla kvalitāti.