Excel Hücrelerine Resim Eklemek için Chrome Uzantısında JavaScript Kullanma

JavaScript ve SheetJS ile Resimleri Excel Dosyalarına Gömme

Excel (.xlsx) dosyaları oluşturan bir Chrome uzantısı geliştirirken, görüntüleri doğrudan hücrelere gömmek zorlu bir iş olabilir. JavaScript ve SheetJS gibi kitaplıklar e-tablo oluşturmayı ve düzenlemeyi basitleştirirken, gömülü görüntülerin işlenmesi genellikle daha spesifik bir işlem gerektirir.

Çoğu durumda geliştiriciler, görüntüleri doğrudan gömmek yerine yalnızca hücrelere görüntü bağlantıları ekleyebilme sınırlamasıyla karşı karşıya kalır. Bu sorun, özellikle Chrome uzantıları gibi bir tarayıcı ortamında, resim verileri dönüştürme ve Excel dosya biçimlendirmesiyle ilgili karmaşıklıklardan kaynaklanmaktadır.

Bu makalede, JavaScript kullanarak görüntüleri doğrudan Excel dosya hücrelerine gömmek için bir çözüm araştıracağız. Görüntüler HTML öğelerinden alınıp uygun Excel hücrelerine eklenecek ve e-tablolarında görsel verilere ihtiyaç duyan kullanıcılara daha kusursuz bir deneyim sunulacak.

ExcelJS gibi kitaplıkların nasıl entegre edileceğini ve görüntülerin korumalı bir Chrome uzantısı ortamına yerleştirilmesi gibi sık karşılaşılan zorlukların üstesinden nasıl gelineceğini tartışacağız. Ayrıca başarılı bir uygulama sağlamak için Node.js ile Chrome uzantısı yaklaşımları arasındaki farkları da inceleyeceğiz.

JavaScript ve ExcelJS Kullanarak Görüntüleri Excel Hücrelerine Gömme

Sağladığım komut dosyası, görüntüleri doğrudan Excel hücrelerine gömme sorununu çözüyor. JavaScript, ExcelJS ve Axios. İlk olarak, komut dosyası ExcelJS kullanarak yeni bir çalışma kitabını şu komutla başlatarak başlar: ExcelJS.Workbook()Excel dosyaları oluşturmanın temeli olan . Daha sonra arayarak bir çalışma sayfası oluşturur. addWorksheet(). Bu çalışma sayfası, eklenecek tüm veriler ve görüntüler için kapsayıcı görevi görür. Örnek veriler, daha sonra getirilip belirli hücrelere yerleştirilecek resim URL'lerini içerir.

Betik, görüntü getirme işlemini gerçekleştirmek için Axios kütüphanesini kullanır. axios.get() URL'lerinden resim istemek için. Axios, görüntüler gibi ikili içeriği Excel dosyasına gömmek için uygun olan ResponseType "arraybuffer"ı kullanarak görüntüyü ikili veri olarak alır. Veriler alındıktan sonra görüntü bir arabellek biçimine dönüştürülür ve ExcelJS'nin bunu bir hücreye gömmek için geçerli bir görüntü olarak tanımasına olanak tanır.

Görüntü alınıp işlendikten sonra komut çalışma kitabı.addImage() Resmi çalışma kitabına eklemek için kullanılır. Bu adım görüntüyü tanımlar ve onu çalışma sayfasında belirli bir konuma yerleştirilmek üzere hazırlar. Bunu takiben, çalışma sayfası.addImage() görüntünün nereye yerleştirilmesi gerektiğini belirtir; bu durumda geçerli satırın "B" sütununa. Satır yüksekliği, görüntünün hücreye tam olarak sığmasını sağlayacak şekilde ayarlanır.

Son olarak, komut dosyası çalışma kitabını kullanarak kaydeder. çalışma kitabı.xlsx.writeFile(), dosyayı yerel sisteme yazar. Bu işlem tamamlanır ve yalnızca bağlantılar yerine doğrudan hücrelere gömülü resimler içeren bir Excel dosyası elde edilir. Bu yöntem, görüntülerin raporlara veya veri sayfalarına dahil edilmesinin gerektiği durumlarda oldukça etkilidir ve hem veri hem de görsel öğeler içeren Excel dosyalarıyla etkileşimde bulunan kullanıcılara kusursuz bir deneyim sağlar.

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

Chrome Uzantıları için Excel Dosyalarına Görüntü Yerleştirmeyi Optimize Etme

Bir geliştirirken Chrome uzantısı Görüntüleri Excel dosyalarına entegre eden en büyük zorluklardan biri, bir tarayıcı ortamına görüntü yerleştirme işleminin nasıl yapılacağıdır. Geleneksel Node.js ortamlarının aksine Chrome uzantıları, belirli API'lere doğrudan erişimi engelleyen ek güvenlik ve performans kısıtlamalarıyla birlikte gelir. Bu, Axios gibi kitaplıkları kullanarak görüntü alma gibi yöntemlerin, tarayıcı politikalarına uyum sağlamak için alternatiflere ihtiyaç duyabileceği anlamına gelir.

Tarayıcı ortamlarına yönelik bir çözüm, aşağıdakilerin kullanılmasını içerebilir: temel64 ham ikili veriler yerine kodlanmış görüntüler. Base64 kodlaması, görüntülerin kolayca aktarılıp bir dize olarak saklanmasına olanak tanır; bu daha sonra SheetJS gibi kitaplıklar kullanılarak doğrudan bir Excel sayfasına gömülebilir. Bu durumda base64 kodlaması, özellikle uzantıların Node.js'ye özgü kodu çalıştıramaması nedeniyle Chrome tarafından uygulanan güvenlik sınırlamalarının aşılmasına yardımcı olur.

Göz önünde bulundurulması gereken bir diğer önemli husus, Excel dosyalarındaki büyük görüntü veri kümelerinin işlenmesidir. Bir Excel sayfasına birden çok görüntünün gömülmesi dosya boyutunu önemli ölçüde artırabilir ve bu da özellikle tarayıcı tabanlı bir uygulamada performansı etkileyebilir. Bunu optimize etmek için geliştiricilerin, görüntü kalitesinin bozulmadan kalmasını sağlarken dosya boyutunu en aza indirmek için WebP veya JPEG gibi sıkıştırılmış görüntü formatlarını kullanmaları gerekir.