Exibir dados do Excel em HTML usando a API REST em Node.js

As páginas da web HTML podem ser visualizadas em qualquer navegador disponível em dispositivos portáteis. Exibir dados do Excel em páginas HTML ajuda a mostrar os dados para as partes interessadas relevantes sem compartilhar a [planilha do Excel] real 2 com eles. Assim, eles podem visualizar facilmente as informações/dados necessários em qualquer navegador. Neste artigo, aprenderemos como exibir dados do Excel em HTML usando uma API REST no Node.js.

Os seguintes tópicos serão abordados neste artigo:

Excel para HTML Viewer REST API e Node.js SDK

Para renderizar planilhas XLS ou XLSX, usarei a API Node.js SDK of GroupDocs.Viewer Cloud. Ele permite renderizar e visualizar todos os tipos de documentos populares e formatos de arquivo de imagem programaticamente. Instale-o usando o seguinte comando no console:

npm install groupdocs-conversion-cloud

Por favor, obtenha seu ID e Segredo do cliente no painel antes de seguir as etapas mencionadas. Depois de ter seu ID e segredo, adicione o código conforme mostrado abaixo:

// Obtenha seu ID e Segredo do cliente no painel e adicione o código conforme mostrado abaixo:
global.clientId = "112f0f38-9dae-42d5-b4fc-cc84ae644972";
global.clientSecret = "16ad3fe0bdc39c910f57d2fd48a5d618";
global.myStorage = "";

const configuration = new groupdocs_viewer_cloud.Configuration(clientId, clientSecret);
configuration.apiBaseUrl = "https://api.groupdocs.cloud";

Exibir dados do Excel em HTML usando a API REST em Node.js

Podemos exibir dados do Excel em HTML seguindo as etapas simples abaixo:

  1. Carregar o arquivo XLSX para a nuvem
  2. Exibir dados do Excel em HTML usando Node.js
  3. Baixar o arquivo renderizado

Carregue o Documento

Em primeiro lugar, faremos o upload do arquivo XLSX para a nuvem usando o exemplo de código abaixo:

// Este exemplo de código demonstra como fazer upload do arquivo XLSX para a nuvem
// Construir FileApi
let fileApi = groupdocs_viewer_cloud.FileApi.fromConfig(configuration);
let resourcesFolder = 'C:\\Files\\viewer\\sample.xlsx';

// Leia os arquivos um por um
fs.readFile(resourcesFolder, (err, fileStream) => {
  // Criar solicitação de upload de arquivo
  let request = new groupdocs_viewer_cloud.UploadFileRequest("sample.xlsx", fileStream, myStorage);
  // Subir arquivo
  fileApi.uploadFile(request);
});

Como resultado, o arquivo carregado estará disponível na seção de arquivos do painel na nuvem.

Exibir dados do Excel em HTML usando Node.js

Podemos renderizar ou exibir dados do Excel em páginas HTML programaticamente seguindo as etapas abaixo:

  • Em primeiro lugar, crie uma instância do ViewApi.
  • Em seguida, crie uma instância do FileInfo.
  • Em seguida, defina o caminho do arquivo de entrada.
  • Em seguida, crie uma instância do ViewOptions.
  • Em seguida, atribua o FileInfo e defina “HTML” como viewFormat.
  • Em seguida, crie uma instância do HtmlOptions.
  • Em seguida, inicie e atribua o arquivo SpreadsheetOptions.
  • Em seguida, defina várias opções, como paginateSheets, textOverflowMode, renderGridLines, etc.
  • Depois disso, crie uma solicitação de visualização chamando o método CreateViewRequest com viewOptions como argumento.
  • Por fim, chame o método ViewApi.createView com CreateViewRequest como argumento para renderizar o HTML.

O exemplo de código a seguir mostra como exibir dados do Excel em HTML usando uma API REST em Node.js.

// Este exemplo de código demonstra como renderizar o Excel na página HTML
// Inicialização da API
let viewApi = groupdocs_viewer_cloud.ViewApi.fromKeys(clientId, clientSecret);

// Arquivo de entrada
let fileInfo = new groupdocs_viewer_cloud.FileInfo();
fileInfo.filePath = "sample.xlsx";

// Definir opções de visualização
let viewOptions = new groupdocs_viewer_cloud.ViewOptions();
viewOptions.fileInfo = fileInfo;
viewOptions.viewFormat = groupdocs_viewer_cloud.ViewOptions.ViewFormatEnum.HTML;

// Definir opções de renderização
viewOptions.renderOptions = new groupdocs_viewer_cloud.HtmlOptions();

// Definir opções de renderização da planilha
viewOptions.renderOptions.spreadsheetOptions = new groupdocs_viewer_cloud.SpreadsheetOptions();
viewOptions.renderOptions.spreadsheetOptions.paginateSheets = false;
viewOptions.renderOptions.spreadsheetOptions.textOverflowMode = groupdocs_viewer_cloud.SpreadsheetOptions.TextOverflowModeEnum.HideText;
viewOptions.renderOptions.spreadsheetOptions.renderGridLines = true;
viewOptions.renderOptions.spreadsheetOptions.renderHiddenColumns = true;
viewOptions.renderOptions.spreadsheetOptions.renderHiddenRows = true;

// Criar solicitação de visualização
let request = new groupdocs_viewer_cloud.CreateViewRequest(viewOptions);
// Criar visualização
let response = await viewApi.createView(request);

// Exibir caminho de páginas HTML renderizadas
for (let page = 0; page < response.pages.length; page++) {
  console.log("Document rendered: " + response.pages[page].path);
}
Exibir dados do Excel em HTML usando Node.js

Exibir dados do Excel em HTML usando Node.js

Por padrão, uma planilha é renderizada em uma página. Podemos personalizar a renderização do Excel aplicando as seguintes opções:

  • Exibir planilhas do Excel em várias páginas
viewOptions.renderOptions.spreadsheetOptions.paginateSheets = true;
viewOptions.renderOptions.spreadsheetOptions.countRowsPerPage = 45;
  • Mostrar linhas de grade em HTML
viewOptions.renderOptions.spreadsheetOptions.renderGridLines = true;
  • Renderizar Linhas e Colunas Vazias
viewOptions.renderOptions.spreadsheetOptions.renderEmptyRows = true;
viewOptions.renderOptions.spreadsheetOptions.renderEmptyColumns = true;
  • Mostrar linhas e colunas ocultas
viewOptions.renderOptions.spreadsheetOptions.renderHiddenColumns = true;
viewOptions.renderOptions.spreadsheetOptions.renderHiddenRows = true;
  • Renderizar apenas a área de impressão
viewOptions.renderOptions.spreadsheetOptions.renderPrintAreaOnly = true;
  • Definir modo de estouro de texto
viewOptions.renderOptions.spreadsheetOptions.textOverflowMode = "HideText";

Baixar páginas HTML

O exemplo de código acima salvará as páginas HTML renderizadas na nuvem. Ele pode ser baixado usando o seguinte exemplo de código:

// Este exemplo de código demonstra como baixar a página HTML da nuvem
// Inicializar API
var fileApi = groupdocs_viewer_cloud.FileApi.fromConfig(configuration);

// Criar solicitação de download de arquivo
let request = new groupdocs_viewer_cloud.DownloadFileRequest("/viewer/sample_xlsx/sample_page_1.html", myStorage);

// ⇬ Fazer download do arquivo
let response = await fileApi.downloadFile(request);

// Salve o arquivo de imagem no diretório de trabalho
fs.writeFile("C:\\Files\\viewer\\sample_xlsx\\sample_page_1.html", response, "binary", function (err) { });

Exibir dados do Excel em HTML com marca d’água usando Node.js

Podemos adicionar um texto de marca d’água ao renderizar dados do Excel em páginas HTML programaticamente seguindo as etapas abaixo:

  • Em primeiro lugar, crie uma instância do ViewApi.
  • Em seguida, crie uma instância do FileInfo.
  • Em seguida, defina o caminho do arquivo de entrada.
  • Em seguida, crie uma instância do ViewOptions.
  • Em seguida, atribua o FileInfo e defina “HTML” como viewFormat.
  • Em seguida, crie e atribua uma instância da marca d’água.
  • Em seguida, defina o tamanho e o texto da marca d’água.
  • Depois disso, crie uma solicitação de visualização chamando o método CreateViewRequest com viewOptions como argumento.
  • Por fim, chame o método ViewApi.createView com CreateViewRequest como argumento para renderizar o HTML.

O exemplo de código a seguir mostra como exibir dados do Excel em HTML com marca d’água usando uma API REST em Node.js.

// Este exemplo de código demonstra como renderizar o Excel em uma página HTML com marca d'água
// Inicialização da API
let viewApi = groupdocs_viewer_cloud.ViewApi.fromKeys(clientId, clientSecret);

// Arquivo de entrada
let fileInfo = new groupdocs_viewer_cloud.FileInfo();
fileInfo.filePath = "sample.xlsx";

// Definir opções de visualização
let viewOptions = new groupdocs_viewer_cloud.ViewOptions();
viewOptions.fileInfo = fileInfo;
viewOptions.viewFormat = groupdocs_viewer_cloud.ViewOptions.ViewFormatEnum.HTML;

// Adicione uma Marca D'água
viewOptions.watermark = new groupdocs_viewer_cloud.Watermark();
viewOptions.watermark.size = 100;
viewOptions.watermark.text = "This is a sample watermark!";

// Criar solicitação de visualização
let request = new groupdocs_viewer_cloud.CreateViewRequest(viewOptions);
// Criar visualização
let response = await viewApi.createView(request);

// Exibir caminho de páginas HTML renderizadas
for (let page = 0; page < response.pages.length; page++) {
  console.log("Document rendered: " + response.pages[page].path);
}
Exibir dados do Excel em HTML com marca d'água usando Node.js

Exibir dados do Excel em HTML com marca d’água usando Node.js

Experimente on-line

Experimente a seguinte ferramenta de renderização on-line gratuita do Excel, que é desenvolvida usando a API acima. https://products.groupdocs.app/viewer/xlsx

Conclusão

Neste artigo, aprendemos como exibir dados do Excel como HTML na nuvem. Também vimos como adicionar marca d’água a páginas HTML renderizadas usando Node.js. Este artigo também explicou como carregar programaticamente um arquivo XLSX para a nuvem e, em seguida, baixar o arquivo HTML renderizado da nuvem. Além disso, você pode aprender mais sobre GroupDocs.Viewer Cloud API usando a documentação. Também fornecemos uma seção Referência de API que permite visualizar e interagir com nossas APIs diretamente pelo navegador. Em caso de ambiguidade, sinta-se à vontade para nos contatar no fórum.

Veja também