Visor de C# ASP.NET Excel

¿Quiere mostrar hojas de cálculo de Microsoft Excel en su aplicación web? ¿Está buscando un visor de Excel ASP.NET MVC? Si es así, has aterrizado en un lugar absolutamente correcto. En este blog, aprenderá cómo crear un Visor de Excel y mostrar hojas de cálculo de Excel en aplicaciones ASP.NET MVC usando C#. Después de dedicar unos minutos y seguir unos sencillos pasos, tendrá su propio visor de Excel (XLS o XLSX) en funcionamiento. Vamos a empezar.

Características de ASP.NET MVC Excel Viewer

Nuestro ASP.NET Excel Viewer tendrá las siguientes funciones y puede mejorarlas según sus requisitos.

  1. Examinar y ver archivos de Excel.
  2. Cargue el archivo de Excel predeterminado al cargar la página.
  3. Pestañas para navegar entre las hojas de cálculo de Excel.

Pasos para crear un visor de Excel en ASP.NET MVC

Los siguientes son algunos pasos sencillos para ver archivos de Excel en ASP.NET MVC.

  1. Cree una nueva aplicación web ASP.NET MVC en Visual Studio.
Aplicación web ASP.NET MVC
  1. Abra el Administrador de paquetes NuGet e instale el paquete Aspose.Cells for .NET.
Ver archivos de Excel en ASP.NET en el navegador
  1. Cree una nueva carpeta “Documentos” para guardar los archivos de Excel y una subcarpeta “Renderizados” para guardar las imágenes renderizadas.

  2. Cree una nueva carpeta con el nombre “Ayudantes” en la carpeta raíz.

  3. Cree una nueva clase con el nombre “Hoja” en la carpeta “Ayudantes” para almacenar la información de las hojas de cálculo de Excel.

public class Sheet
{
	public string SheetName { get; set; }
	public string Path { get; set; }
}
  1. Abra la clase “HomeController” y reemplace su código con el siguiente. Asegúrese de reemplazar el nombre del archivo de Excel predeterminado en la acción Índice.
public class HomeController : Controller
{
	public List<Sheet> sheets;

	[HttpGet]
	public ActionResult Index(string fileName)
	{
		sheets = new List<Sheet>();
		if (fileName == null)
		{
			// Mostrar hoja de trabajo predeterminada al cargar la página
			sheets = RenderExcelWorksheetsAsImage("Workbook.xlsx");
		}
		else
		{
			sheets = RenderExcelWorksheetsAsImage(fileName);
		}

		return View(sheets);
	}
	public List<Sheet> RenderExcelWorksheetsAsImage(string FileName)
	{
		// Cargar el libro de Excel 
		Workbook book = new Workbook(Server.MapPath(Path.Combine("~/Documents", FileName)));
		var workSheets = new List<Sheet>();
		// Establecer opciones de representación de imágenes
		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("~/");

		// Crear renderizador de libros de Excel
		WorkbookRender wr = new WorkbookRender(book, options);
		// Guardar y ver hojas de trabajo
		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 y reemplace su contenido con el siguiente script.
@{
    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. Cree la aplicación y ejecútela en su navegador favorito.

Ver archivos de Excel en ASP.NET MVC Viewer - Demostración

El archivo de Excel predeterminado se mostrará cuando inicie la aplicación por primera vez.

Visor de Excel en ASP.NET C#

Abrir un archivo de Excel

Para abrir un archivo de Excel, haga clic en el botón Examinar y seleccione el archivo de la lista.

Examinar archivos de Excel
Abrir archivo de Excel en ASP.NET C#

Todas las hojas de cálculo del libro de Excel se mostrarán en forma de pestañas. Puede hacer clic en las pestañas para navegar entre las hojas de trabajo.

Mostrar archivos de Excel en ASP.NET

Descargar código fuente

Esta aplicación es de código abierto y su código fuente está disponible en GitHub.

Obtenga una licencia temporal para Aspose.Cells for .NET

Puede obtener la licencia temporal de Aspose.Cells para la API de .NET para evitar las limitaciones de evaluación/prueba.