在 Chrome 扩展中使用 JavaScript 将图像插入 Excel 单元格

使用 ExcelJS 和 Axios 将图像嵌入到 Excel 单元格中

该解决方案使用 Node.js、ExcelJS 创建 Excel 工作簿，并使用 Axios 获取图像数据。它可以将图像直接嵌入到 Excel 单元格中。

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

使用 Base64 数据和 SheetJS 在 Excel 中嵌入图像

该解决方案侧重于获取图像并将其转换为 Base64 格式，然后在 Chrome 扩展环境中使用 SheetJS 将其嵌入到 Excel 文件中。

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

有关使用 JavaScript 将图像嵌入 Excel 的常见问题

1. 如何在 Chrome 扩展环境中获取图像？
2. 在 Chrome 扩展程序中，您可以使用 fetch() 从 URL 检索图像并将其转换为 base64 使用 FileReader 用于嵌入。
3. 图像应采用什么格式以避免文件过大？
4. 建议使用 WebP 或者 JPEG 格式，因为它们提供更好的压缩并减少最终的 Excel 文件大小。
5. 是否可以将多个图像嵌入到单个 Excel 文件中？
6. 是的，使用像这样的库 ExcelJS 或者 SheetJS，您可以通过循环访问图像 URL 数组来将多个图像嵌入到不同的单元格中。
7. 在 Node.js 和浏览器中嵌入图像有什么区别？
8. 在 Node.js 中，您可以使用 axios.get() 要获取图像数据，在浏览器中，您需要使用 fetch() 并妥善处理CORS政策。
9. 如何确保在 Excel 单元格中正确调整图像大小？
10. 使用 row.height 和 addImage() 函数来控制嵌入图像的单元格的尺寸，确保正确显示。

关于在 Excel 中嵌入图像的最终想法

使用以下命令将图像直接嵌入到 Excel 单元格中 JavaScript 需要正确的工具和库，例如 ExcelJS，尤其是在 Chrome 扩展环境中工作时。它允许您生成更加动态且视觉效果丰富的 Excel 文件。

通过优化技术（例如以二进制格式获取图像数据并将其直接嵌入到单元格中），此方法可确保生成的 Excel 文件既实用又美观，满足 Web 开发及其他领域的各种用例。