Sử dụng JavaScript trong Tiện ích mở rộng của Chrome để chèn hình ảnh vào ô Excel

Nhúng hình ảnh vào tệp Excel bằng JavaScript và SheetJS

Khi phát triển tiện ích mở rộng của Chrome tạo tệp Excel (.xlsx), việc nhúng hình ảnh trực tiếp vào ô có thể là một nhiệm vụ đầy thách thức. Trong khi JavaScript và các thư viện như SheetJS đơn giản hóa việc tạo và chỉnh sửa bảng tính, việc xử lý hình ảnh nhúng thường yêu cầu xử lý cụ thể hơn.

Trong nhiều trường hợp, nhà phát triển phải đối mặt với hạn chế là chỉ có thể thêm liên kết hình ảnh vào ô thay vì nhúng hình ảnh trực tiếp. Vấn đề này phát sinh từ sự phức tạp liên quan đến việc chuyển đổi dữ liệu hình ảnh và định dạng tệp Excel, đặc biệt là trong môi trường trình duyệt như tiện ích mở rộng của Chrome.

Trong bài viết này, chúng ta sẽ khám phá giải pháp nhúng hình ảnh trực tiếp vào ô tệp Excel bằng JavaScript. Hình ảnh sẽ được tìm nạp từ các phần tử HTML và chèn vào các ô Excel thích hợp, mang lại trải nghiệm liền mạch hơn cho người dùng cần dữ liệu trực quan trong bảng tính của họ.

Chúng ta sẽ thảo luận cách tích hợp các thư viện như ExcelJS và giải quyết các thách thức phổ biến như nhúng hình ảnh vào môi trường tiện ích mở rộng được bảo vệ của Chrome. Ngoài ra, chúng tôi sẽ xem xét sự khác biệt giữa các phương pháp tiếp cận tiện ích mở rộng của Node.js và Chrome để đảm bảo triển khai thành công.

Cách nhúng hình ảnh vào ô Excel bằng JavaScript và ExcelJS

Tập lệnh tôi đã cung cấp giải quyết vấn đề nhúng hình ảnh trực tiếp vào các ô Excel bằng cách sử dụng JavaScript, ExcelJS và Axios. Đầu tiên, tập lệnh bắt đầu bằng cách khởi tạo một sổ làm việc mới bằng ExcelJS bằng lệnh ExcelJS.Workbook(), đây là nền tảng để tạo các tệp Excel. Sau đó nó tạo một bảng tính bằng cách gọi addWorksheet(). Bảng tính này đóng vai trò là nơi chứa tất cả dữ liệu và hình ảnh sẽ được thêm vào. Dữ liệu mẫu bao gồm các URL hình ảnh mà sau này sẽ được tìm nạp và nhúng vào các ô cụ thể.

Để xử lý việc tìm nạp hình ảnh, tập lệnh sử dụng thư viện Axios với axios.get() để yêu cầu hình ảnh từ URL của họ. Axios truy xuất hình ảnh dưới dạng dữ liệu nhị phân bằng cách sử dụng "arraybuffer" kiểu phản hồi, phù hợp để nhúng nội dung nhị phân như hình ảnh vào tệp Excel. Sau khi nhận được dữ liệu, hình ảnh được chuyển đổi sang định dạng bộ đệm, cho phép ExcelJS nhận dạng đó là hình ảnh hợp lệ để nhúng vào ô.

Sau khi hình ảnh được tìm nạp và xử lý, lệnh sổ làm việc.addImage() được sử dụng để chèn hình ảnh vào sổ làm việc. Bước này xác định hình ảnh và chuẩn bị để đặt nó vào một vị trí cụ thể trong trang tính. Theo sau điều này, bảng tính.addImage() chỉ định vị trí đặt hình ảnh, trong trường hợp này là cột "B" của hàng hiện tại. Chiều cao của hàng được điều chỉnh để đảm bảo rằng hình ảnh vừa khít trong ô.

Cuối cùng, tập lệnh lưu sổ làm việc bằng cách sử dụng sổ làm việc.xlsx.writeFile(), ghi tệp vào hệ thống cục bộ. Thao tác này sẽ hoàn tất quy trình, tạo ra một tệp Excel có hình ảnh được nhúng trực tiếp vào các ô chứ không chỉ là các liên kết. Phương pháp này mang lại hiệu quả cao trong trường hợp cần đưa hình ảnh vào báo cáo hoặc bảng dữ liệu, mang lại trải nghiệm liền mạch cho người dùng tương tác với các tệp Excel chứa cả dữ liệu và yếu tố hình ảnh.

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

Tối ưu hóa việc nhúng hình ảnh vào tệp Excel cho tiện ích mở rộng của Chrome

Khi phát triển một Tiện ích mở rộng của Chrome tích hợp hình ảnh vào tệp Excel, một thách thức lớn là làm thế nào để xử lý việc nhúng hình ảnh trong môi trường trình duyệt. Không giống như môi trường Node.js truyền thống, các tiện ích mở rộng của Chrome đi kèm với các hạn chế về hiệu suất và bảo mật bổ sung nhằm ngăn chặn quyền truy cập trực tiếp vào một số API nhất định. Điều này có nghĩa là các phương pháp như tìm nạp hình ảnh bằng thư viện như Axios có thể cần các giải pháp thay thế để tuân thủ chính sách của trình duyệt.

Một giải pháp cho môi trường trình duyệt có thể liên quan đến việc sử dụng cơ sở64 hình ảnh được mã hóa thay vì dữ liệu nhị phân thô. Mã hóa Base64 cho phép hình ảnh dễ dàng được chuyển và lưu trữ dưới dạng chuỗi, sau đó có thể nhúng trực tiếp vào trang tính Excel bằng các thư viện như SheetJS. Trong trường hợp này, mã hóa base64 giúp khắc phục các hạn chế bảo mật do Chrome áp đặt, đặc biệt vì các tiện ích mở rộng không thể thực thi mã dành riêng cho Node.js.

Một khía cạnh quan trọng khác cần xem xét là việc xử lý các tập dữ liệu hình ảnh lớn trong tệp Excel. Nhúng nhiều hình ảnh vào một trang tính Excel có thể làm tăng đáng kể kích thước tệp, điều này có thể ảnh hưởng đến hiệu suất, đặc biệt là trong ứng dụng dựa trên trình duyệt. Để tối ưu hóa điều này, nhà phát triển nên sử dụng các định dạng ảnh nén như WebP hoặc JPEG để giảm thiểu kích thước file mà vẫn đảm bảo chất lượng hình ảnh được giữ nguyên.