Visualizador do Excel C# ASP.NET

Deseja exibir planilhas do Microsoft Excel em seu aplicativo da web? Você está procurando um Visualizador de Excel ASP.NET MVC? Se sim, você pousou em um lugar absolutamente correto. Neste blog, você aprenderá como criar um Visualizador do Excel e exibir planilhas do Excel em aplicativos ASP.NET MVC usando C#. Depois de alguns minutos e seguindo alguns passos simples, você terá seu próprio Visualizador do Excel (XLS ou XLSX) instalado e funcionando. Então vamos começar.

Recursos do Visualizador do Excel ASP.NET MVC

Nosso ASP.NET Excel Viewer terá os seguintes recursos e você pode aprimorá-los de acordo com suas necessidades.

  1. Navegue e visualize arquivos do Excel.
  2. Carregue o arquivo padrão do Excel no carregamento da página.
  3. Guias para navegar entre planilhas do Excel.

Etapas para criar o visualizador do Excel no ASP.NET MVC

A seguir estão algumas etapas fáceis para exibir arquivos do Excel no ASP.NET MVC.

  1. Crie um novo aplicativo Web ASP.NET MVC no Visual Studio.
Aplicativo Web ASP.NET MVC
  1. Abra o Gerenciador de Pacotes NuGet e instale o pacote Aspose.Cells for .NET.
Exibir arquivos do Excel no ASP.NET no navegador

  1. Crie uma nova pasta “Documents” para guardar os arquivos do Excel e uma subpasta “Rendered” para salvar as imagens renderizadas.

  2. Crie uma nova pasta com o nome “Ajudantes” na pasta raiz.

  3. Crie uma nova classe com o nome “Planilha” na pasta “Ajudantes” para armazenar as informações das planilhas do Excel.

public class Sheet
{
	public string SheetName { get; set; }
	public string Path { get; set; }
}
  1. Abra a classe “HomeController” e substitua seu código pelo seguinte. Certifique-se de substituir o nome do arquivo padrão do Excel na ação Indexar.
public class HomeController : Controller
{
	public List<Sheet> sheets;

	[HttpGet]
	public ActionResult Index(string fileName)
	{
		sheets = new List<Sheet>();
		if (fileName == null)
		{
			// Exibir planilha padrão no carregamento da página
			sheets = RenderExcelWorksheetsAsImage("Workbook.xlsx");
		}
		else
		{
			sheets = RenderExcelWorksheetsAsImage(fileName);
		}

		return View(sheets);
	}
	public List<Sheet> RenderExcelWorksheetsAsImage(string FileName)
	{
		// Carregar a pasta de trabalho do Excel 
		Workbook book = new Workbook(Server.MapPath(Path.Combine("~/Documents", FileName)));
		var workSheets = new List<Sheet>();
		// Definir opções de renderização de imagem
		ImageOrPrintOptions options = new ImageOrPrintOptions();
		options.HorizontalResolution = 200;
		options.VerticalResolution = 200;
		options.AllColumnsInOnePagePerSheet = true;
		options.OnePagePerSheet = true;
		options.TextCrossType = TextCrossType.Default;
		options.ImageType = Aspose.Cells.Drawing.ImageType.Png;

		string imagePath = "";
		string basePath = Server.MapPath("~/");

		// Criar renderizador de pasta de trabalho do Excel
		WorkbookRender wr = new WorkbookRender(book, options);
		// Salvar e visualizar planilhas
		for (int j = 0; j < book.Worksheets.Count; j++)
		{
			imagePath = Path.Combine("/Documents/Rendering", string.Format("sheet_{0}.png", j));
			wr.ToImage(j, basePath + imagePath);
			workSheets.Add(new Sheet { SheetName = string.Format("{0}", book.Worksheets[j].Name), Path = imagePath });
		}

		return workSheets;
	}
}
  1. Abra Views/Home/index.cshtml e substitua seu conteúdo pelo script a seguir.
@{
    ViewBag.Title = "Home Page";
    string[] files = Directory.GetFiles(Server.MapPath("~/Documents/"), "*.xlsx");
}
@model List<Excel_Viewer.Helper.Sheet>
@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Excel Viewer</title>
    <!-- CSS Includes -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <a class="navbar-brand" href="#">Spreadsheet Viewer</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                            browse
                        </button>
                    </li>
                </ul>
            </div>
        </nav>
        <br />
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            @for (int i = 0; i < Model.Count; i++)
            {
                if (i == 0)
                {
                    <li class="nav-item">
                        <a class="nav-link active" id="@Model[i].SheetName.Replace(' ','_')-tab" data-toggle="tab" href="#@Model[i].SheetName.Replace(' ','_')" role="tab" aria-controls="@Model[i].SheetName">@Model[i].SheetName</a>
                    </li>
                }
                else
                {
                    <li class="nav-item">
                        <a class="nav-link" id="@Model[i].SheetName.Replace(' ','_')-tab" data-toggle="tab" href="#@Model[i].SheetName.Replace(' ','_')" role="tab" aria-controls="@Model[i].SheetName">@Model[i].SheetName</a>
                    </li>
                }
            }
        </ul>
        <div class="tab-content" id="myTabContent">
            @for (int i = 0; i < Model.Count; i++)
            {
                if (i == 0)
                {
                    <div class="tab-pane fade show active" id="@Model[i].SheetName.Replace(' ','_')" role="tabpanel"><br />
                        <div class="card">
                            <div class="card-body"> <img src="@Model[i].Path" style="width: 11in" /></div>
                        </div>
                    </div>
                }
                else
                {
                    <div class="tab-pane fade" id="@Model[i].SheetName.Replace(' ','_')" role="tabpanel"><br />
                        <div class="card">
                            <div class="card-body"> <img src="@Model[i].Path" style="width: 11in" /></div>
                        </div>
                    </div>
                }
            }
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Select a file</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="list-group">
                        @foreach (string s in files)
                        {
                            string fileName = Path.GetFileName(s);
                            @Html.ActionLink(fileName, "Index", "Home", new { fileName = fileName }, new { @class = "list-group-item" })
                        }
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <!-- JS includes -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> @**@
    <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
</body>
</html>
  1. Crie o aplicativo e execute-o em seu navegador favorito.

Exibir arquivos do Excel no ASP.NET MVC Viewer - Demo

O arquivo padrão do Excel será exibido quando você iniciar o aplicativo pela primeira vez.

Visualizador do Excel em ASP.NET C#

Abra um arquivo do Excel

Para abrir um arquivo Excel, clique no botão Procurar e selecione o arquivo na lista.

Procurar arquivos do Excel
Abra o arquivo do Excel no ASP.NET C#

Todas as planilhas na pasta de trabalho do Excel serão exibidas na forma de guias. Você pode clicar nas guias para navegar entre as planilhas.

Exibir arquivos do Excel no ASP.NET

Baixar código fonte

Este aplicativo é de código aberto e seu código-fonte está disponível no GitHub.

Obtenha uma licença temporária para Aspose.Cells para .NET

Você pode obter a licença temporária do Aspose.Cells para .NET API para evitar limitações de avaliação/teste.