Menggunakan JavaScript dalam Sambungan Chrome untuk Memasukkan Imej ke dalam Sel Excel

Membenamkan Imej dalam Fail Excel dengan JavaScript dan SheetJS

Apabila membangunkan sambungan Chrome yang menjana fail Excel (.xlsx), membenamkan imej terus ke dalam sel boleh menjadi tugas yang mencabar. Walaupun JavaScript dan perpustakaan seperti SheetJS memudahkan membuat dan mengedit hamparan, pengendalian imej terbenam selalunya memerlukan pengendalian yang lebih khusus.

Dalam banyak kes, pembangun menghadapi had untuk hanya boleh menambah pautan imej ke sel dan bukannya membenamkan imej secara terus. Isu ini timbul daripada kerumitan yang terlibat dalam penukaran data imej dan pemformatan fail Excel, terutamanya dalam persekitaran penyemak imbas seperti sambungan Chrome.

Dalam artikel ini, kami akan meneroka penyelesaian untuk membenamkan imej terus ke dalam sel fail Excel menggunakan JavaScript. Imej akan diambil daripada elemen HTML dan dimasukkan ke dalam sel Excel yang sesuai, menawarkan pengalaman yang lebih lancar untuk pengguna yang memerlukan data visual dalam hamparan mereka.

Kami akan membincangkan cara untuk menyepadukan perpustakaan seperti ExcelJS dan menangani cabaran biasa seperti membenamkan imej dalam persekitaran sambungan Chrome yang dilindungi. Selain itu, kami akan menyemak perbezaan antara pendekatan sambungan Node.js dan Chrome untuk memastikan pelaksanaan yang berjaya.

Cara Membenamkan Imej ke dalam Sel Excel Menggunakan JavaScript dan ExcelJS

Skrip yang saya sediakan menyelesaikan masalah membenamkan imej terus ke dalam sel Excel menggunakan JavaScript, ExcelJS dan Axios. Pertama, skrip bermula dengan memulakan buku kerja baharu menggunakan ExcelJS dengan arahan ExcelJS.Workbook(), yang merupakan asas untuk menjana fail Excel. Ia kemudian mencipta lembaran kerja dengan memanggil addWorksheet(). Lembaran kerja ini bertindak sebagai bekas untuk semua data dan imej yang akan ditambahkan. Data sampel termasuk URL imej yang kemudiannya akan diambil dan dibenamkan ke dalam sel tertentu.

Untuk mengendalikan pengambilan imej, skrip menggunakan perpustakaan Axios dengan axios.get() untuk meminta imej daripada URL mereka. Axios mendapatkan semula imej sebagai data binari menggunakan responseType "arraybuffer", yang sesuai untuk membenamkan kandungan binari seperti imej ke dalam fail Excel. Selepas menerima data, imej ditukar kepada format penimbal, membolehkan ExcelJS mengenalinya sebagai imej yang sah untuk dibenamkan ke dalam sel.

Setelah imej diambil dan diproses, arahan buku kerja.addImage() digunakan untuk memasukkan imej ke dalam buku kerja. Langkah ini mentakrifkan imej dan menyediakannya untuk diletakkan di lokasi tertentu dalam lembaran kerja. Berikutan ini, worksheet.addImage() menentukan di mana imej harus diletakkan, dalam kes ini dalam lajur "B" baris semasa. Ketinggian baris dilaraskan untuk memastikan imej sesuai dengan baik di dalam sel.

Akhirnya, skrip menyimpan buku kerja menggunakan workbook.xlsx.writeFile(), yang menulis fail ke sistem tempatan. Ini melengkapkan proses, menghasilkan fail Excel dengan imej terbenam terus dalam sel, bukannya pautan sahaja. Kaedah ini sangat berkesan dalam kes di mana imej perlu disertakan dalam laporan atau helaian data, memberikan pengalaman yang lancar untuk pengguna berinteraksi dengan fail Excel yang mengandungi kedua-dua data dan elemen visual.

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

Mengoptimumkan Pembenaman Imej dalam Fail Excel untuk Sambungan Chrome

Apabila membangunkan a Sambungan Chrome yang menyepadukan imej ke dalam fail Excel, satu cabaran utama ialah cara mengendalikan pembenaman imej dalam persekitaran penyemak imbas. Tidak seperti persekitaran Node.js tradisional, sambungan Chrome disertakan dengan sekatan keselamatan dan prestasi tambahan yang menghalang akses terus kepada API tertentu. Ini bermakna kaedah seperti mengambil imej menggunakan perpustakaan seperti Axios mungkin memerlukan alternatif untuk mematuhi dasar penyemak imbas.

Penyelesaian untuk persekitaran penyemak imbas mungkin melibatkan penggunaan asas64 imej yang dikodkan dan bukannya data binari mentah. Pengekodan Base64 membolehkan imej dipindahkan dan disimpan dengan mudah sebagai rentetan, yang kemudiannya boleh dibenamkan terus ke dalam helaian Excel menggunakan perpustakaan seperti SheetJS. Dalam kes ini, pengekodan base64 membantu mengatasi had keselamatan yang dikenakan oleh Chrome, terutamanya kerana sambungan tidak dapat melaksanakan kod khusus Node.js.

Satu lagi aspek penting untuk dipertimbangkan ialah pengendalian set data imej besar dalam fail Excel. Membenamkan berbilang imej ke dalam helaian Excel boleh meningkatkan saiz fail secara drastik, yang boleh menjejaskan prestasi, terutamanya dalam aplikasi berasaskan penyemak imbas. Untuk mengoptimumkan ini, pembangun harus menggunakan format imej termampat seperti WebP atau JPEG untuk meminimumkan saiz fail sambil memastikan kualiti imej kekal utuh.