Memanfaatkan JavaScript di Ekstensi Chrome untuk Memasukkan Gambar ke Sel Excel

Menyematkan Gambar di File Excel dengan JavaScript dan SheetJS

Saat mengembangkan ekstensi Chrome yang menghasilkan file Excel (.xlsx), menyematkan gambar langsung ke dalam sel bisa menjadi tugas yang menantang. Meskipun JavaScript dan pustaka seperti SheetJS menyederhanakan pembuatan dan pengeditan spreadsheet, penanganan gambar yang disematkan sering kali memerlukan penanganan yang lebih spesifik.

Dalam banyak kasus, pengembang menghadapi keterbatasan karena hanya dapat menambahkan tautan gambar ke sel daripada menyematkan gambar secara langsung. Masalah ini muncul dari kerumitan dalam konversi data gambar dan pemformatan file Excel, khususnya di lingkungan browser seperti ekstensi Chrome.

Pada artikel ini, kita akan mengeksplorasi solusi untuk menyematkan gambar langsung ke sel file Excel menggunakan JavaScript. Gambar akan diambil dari elemen HTML dan dimasukkan ke dalam sel Excel yang sesuai, menawarkan pengalaman yang lebih lancar bagi pengguna yang membutuhkan data visual dalam spreadsheet mereka.

Kami akan membahas cara mengintegrasikan perpustakaan seperti ExcelJS dan mengatasi tantangan umum seperti menyematkan gambar di lingkungan ekstensi Chrome yang dilindungi. Selain itu, kami akan meninjau perbedaan antara pendekatan ekstensi Node.js dan Chrome untuk memastikan penerapan yang sukses.

Cara Menyematkan Gambar ke Sel Excel Menggunakan JavaScript dan ExcelJS

Skrip yang saya sediakan memecahkan masalah menyematkan gambar langsung ke sel Excel menggunakan JavaScript, ExcelJS, dan Axios. Pertama, skrip dimulai dengan menginisialisasi buku kerja baru menggunakan ExcelJS dengan perintah ExcelJS.Buku Kerja(), yang merupakan dasar untuk menghasilkan file Excel. Kemudian membuat lembar kerja dengan menelepon tambahkanLembar Kerja(). Lembar kerja ini bertindak sebagai wadah untuk semua data dan gambar yang akan ditambahkan. Data sampel mencakup URL gambar yang nantinya akan diambil dan disematkan ke dalam sel tertentu.

Untuk menangani pengambilan gambar, skrip menggunakan perpustakaan Axios dengan aksio.get() untuk meminta gambar dari URL mereka. Axios mengambil gambar sebagai data biner menggunakan "arraybuffer" tipe respons, yang cocok untuk menyematkan konten biner seperti gambar ke dalam file Excel. Setelah menerima data, gambar diubah menjadi format buffer, memungkinkan ExcelJS mengenalinya sebagai gambar yang valid untuk disematkan ke dalam sel.

Setelah gambar diambil dan diproses, perintahnya buku kerja.addImage() digunakan untuk memasukkan gambar ke dalam buku kerja. Langkah ini mendefinisikan gambar dan mempersiapkannya untuk ditempatkan di lokasi tertentu dalam lembar kerja. Setelah ini, lembar kerja.tambahkanGambar() menentukan di mana gambar harus ditempatkan, dalam hal ini di kolom "B" pada baris saat ini. Ketinggian baris disesuaikan untuk memastikan gambar pas di dalam sel.

Terakhir, skrip menyimpan buku kerja menggunakan buku kerja.xlsx.writeFile(), yang menulis file ke sistem lokal. Ini menyelesaikan prosesnya, menghasilkan file Excel dengan gambar yang disematkan langsung di sel, bukan hanya tautan. Metode ini sangat efektif jika gambar perlu disertakan dalam laporan atau lembar data, memberikan pengalaman yang lancar bagi pengguna saat berinteraksi dengan file Excel yang berisi 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();

Mengoptimalkan Penyematan Gambar di File Excel untuk Ekstensi Chrome

Saat mengembangkan a Ekstensi Chrome yang mengintegrasikan gambar ke dalam file Excel, salah satu tantangan utamanya adalah bagaimana menangani penyematan gambar dalam lingkungan browser. Tidak seperti lingkungan Node.js tradisional, ekstensi Chrome dilengkapi dengan batasan keamanan dan kinerja tambahan yang mencegah akses langsung ke API tertentu. Ini berarti metode seperti mengambil gambar menggunakan pustaka seperti Axios mungkin memerlukan alternatif untuk mematuhi kebijakan browser.

Solusi untuk lingkungan browser mungkin melibatkan penggunaan base64 gambar yang disandikan, bukan data biner mentah. Pengkodean Base64 memungkinkan gambar dengan mudah ditransfer dan disimpan sebagai string, yang kemudian dapat disematkan langsung ke dalam lembar Excel menggunakan pustaka seperti SheetJS. Dalam hal ini, pengkodean base64 membantu mengatasi batasan keamanan yang diberlakukan oleh Chrome, terutama karena ekstensi tidak dapat mengeksekusi kode khusus Node.js.

Aspek penting lainnya yang perlu dipertimbangkan adalah penanganan kumpulan data gambar berukuran besar dalam file Excel. Menyematkan banyak gambar ke dalam lembar Excel dapat meningkatkan ukuran file secara drastis, yang dapat memengaruhi kinerja, terutama dalam aplikasi berbasis browser. Untuk mengoptimalkannya, pengembang sebaiknya menggunakan format gambar terkompresi seperti WebP atau JPEG untuk meminimalkan ukuran file sekaligus memastikan kualitas gambar tetap utuh.