Utilizando JavaScript em uma extensão do Chrome para inserir imagens em células do Excel

Incorporando imagens em arquivos Excel com JavaScript e SheetJS

Ao desenvolver uma extensão do Chrome que gera arquivos Excel (.xlsx), incorporar imagens diretamente nas células pode ser uma tarefa desafiadora. Embora JavaScript e bibliotecas como SheetJS simplifiquem a criação e edição de planilhas, o manuseio de imagens incorporadas geralmente requer um tratamento mais específico.

Em muitos casos, os desenvolvedores enfrentam a limitação de apenas poder adicionar links de imagens às células, em vez de incorporar as imagens diretamente. Esse problema surge das complexidades envolvidas na conversão de dados de imagem e na formatação de arquivos do Excel, especialmente em um ambiente de navegador como as extensões do Chrome.

Neste artigo, exploraremos uma solução para incorporar imagens diretamente em células de arquivo Excel usando JavaScript. As imagens serão obtidas de elementos HTML e inseridas nas células apropriadas do Excel, oferecendo uma experiência mais integrada para usuários que precisam de dados visuais em suas planilhas.

Discutiremos como integrar bibliotecas como ExcelJS e enfrentar desafios comuns, como incorporar imagens em um ambiente protegido de extensão do Chrome. Além disso, revisaremos as diferenças entre as abordagens de extensão do Node.js e do Chrome para garantir uma implementação bem-sucedida.

Como incorporar imagens em células do Excel usando JavaScript e ExcelJS

O script que forneci resolve o problema de incorporar imagens diretamente em células do Excel usando JavaScript, ExcelJS e Axios. Primeiro, o script começa inicializando uma nova pasta de trabalho usando ExcelJS com o comando ExcelJS.Workbook(), que é a base para a geração de arquivos Excel. Em seguida, ele cria uma planilha chamando adicionarPlanilha(). Esta planilha atua como contêiner para todos os dados e imagens que serão adicionados. Os dados de amostra incluem URLs de imagens que serão posteriormente buscados e incorporados em células específicas.

Para lidar com a busca da imagem, o script usa a biblioteca Axios com axios.get() para solicitar imagens de seus URLs. Axios recupera a imagem como dados binários usando o responseType "arraybuffer", que é adequado para incorporar conteúdo binário, como imagens, no arquivo Excel. Após receber os dados, a imagem é convertida em formato buffer, permitindo que o ExcelJS a reconheça como uma imagem válida para incorporação em uma célula.

Depois que a imagem for buscada e processada, o comando pasta de trabalho.addImage() é usado para inserir a imagem na pasta de trabalho. Esta etapa define a imagem e a prepara para ser colocada em um local específico da planilha. Seguindo isso, planilha.addImage() especifica onde a imagem deve ser colocada, neste caso na coluna “B” da linha atual. A altura da linha é ajustada para garantir que a imagem caiba bem na célula.

Finalmente, o script salva a pasta de trabalho usando pasta de trabalho.xlsx.writeFile(), que grava o arquivo no sistema local. Isso conclui o processo, resultando em um arquivo Excel com imagens incorporadas diretamente nas células, em vez de apenas links. Este método é altamente eficaz nos casos em que é necessário incluir imagens em relatórios ou planilhas de dados, proporcionando uma experiência perfeita para usuários que interagem com arquivos Excel que contêm dados e elementos visuais.

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

Otimizando a incorporação de imagens em arquivos Excel para extensões do Chrome

Ao desenvolver um Extensão do Chrome que integra imagens em arquivos Excel, um grande desafio é como lidar com a incorporação de imagens em um ambiente de navegador. Ao contrário dos ambientes Node.js tradicionais, as extensões do Chrome vêm com restrições adicionais de segurança e desempenho que impedem o acesso direto a determinadas APIs. Isso significa que métodos como a busca de imagens usando bibliotecas como Axios podem precisar de alternativas para cumprir as políticas do navegador.

Uma solução para ambientes de navegador poderia envolver o uso base64 imagens codificadas em vez de dados binários brutos. A codificação Base64 permite que as imagens sejam facilmente transferidas e armazenadas como uma string, que pode então ser incorporada diretamente em uma planilha do Excel usando bibliotecas como SheetJS. Nesse caso, a codificação base64 ajuda a superar as limitações de segurança impostas pelo Chrome, especialmente porque as extensões não podem executar código específico do Node.js.

Outro aspecto crucial a considerar é o tratamento de grandes conjuntos de dados de imagens em arquivos Excel. Incorporar várias imagens em uma planilha do Excel pode aumentar drasticamente o tamanho do arquivo, o que pode afetar o desempenho, especialmente em um aplicativo baseado em navegador. Para otimizar isso, os desenvolvedores devem usar formatos de imagem compactados como WebP ou JPEG para minimizar o tamanho do arquivo e garantir que a qualidade da imagem permaneça intacta.