Visualizzatore C# ASP.NET Excel

Vuoi visualizzare i fogli di lavoro di Microsoft Excel all’interno della tua applicazione web? Stai cercando un visualizzatore ASP.NET MVC Excel? Se sì, sei atterrato in un posto assolutamente corretto. In questo blog imparerai come creare un visualizzatore di Excel e visualizzare i fogli di lavoro di Excel nelle applicazioni ASP.NET MVC usando C#. Dopo aver speso alcuni minuti e aver seguito alcuni semplici passaggi, avrai il tuo Visualizzatore Excel (XLS o XLSX) attivo e funzionante. Quindi iniziamo.

Caratteristiche di ASP.NET MVC Excel Viewer

Il nostro visualizzatore ASP.NET Excel avrà le seguenti funzionalità e potrai migliorarle secondo le tue esigenze.

  1. Sfoglia e visualizza i file Excel.
  2. Carica il file Excel predefinito al caricamento della pagina.
  3. Schede per navigare tra i fogli di lavoro di Excel.

Passaggi per creare un visualizzatore di Excel in ASP.NET MVC

Di seguito sono riportati alcuni semplici passaggi per visualizzare i file Excel in ASP.NET MVC.

  1. Creare una nuova applicazione Web ASP.NET MVC in Visual Studio.
Applicazione Web ASP.NET MVC
  1. Aprire Gestione pacchetti NuGet e installare il pacchetto Aspose.Cells for .NET.
Visualizza i file Excel in ASP.NET nel browser

  1. Crea una nuova cartella “Documenti” per conservare i file Excel e una sottocartella “Renderizzati” per salvare le immagini renderizzate.

  2. Crea una nuova cartella con il nome “Helpers” nella cartella principale.

  3. Creare una nuova classe con il nome “Foglio” nella cartella “Aiuti” per memorizzare le informazioni dei fogli di lavoro di Excel.

public class Sheet
{
	public string SheetName { get; set; }
	public string Path { get; set; }
}
  1. Apri la classe “HomeController” e sostituisci il suo codice con il seguente. Assicurati di sostituire il nome del file Excel predefinito nell’azione Indice.
public class HomeController : Controller
{
	public List<Sheet> sheets;

	[HttpGet]
	public ActionResult Index(string fileName)
	{
		sheets = new List<Sheet>();
		if (fileName == null)
		{
			// Visualizza il foglio di lavoro predefinito al caricamento della pagina
			sheets = RenderExcelWorksheetsAsImage("Workbook.xlsx");
		}
		else
		{
			sheets = RenderExcelWorksheetsAsImage(fileName);
		}

		return View(sheets);
	}
	public List<Sheet> RenderExcelWorksheetsAsImage(string FileName)
	{
		// Carica la cartella di lavoro di Excel 
		Workbook book = new Workbook(Server.MapPath(Path.Combine("~/Documents", FileName)));
		var workSheets = new List<Sheet>();
		// Imposta le opzioni di rendering delle immagini
		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("~/");

		// Crea un renderer di cartelle di lavoro Excel
		WorkbookRender wr = new WorkbookRender(book, options);
		// Salva e visualizza fogli di lavoro
		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. Apri Views/Home/index.cshtml e sostituisci il suo contenuto con il seguente 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. Crea l’applicazione ed eseguila nel tuo browser preferito.

Visualizza file Excel in ASP.NET MVC Viewer - Demo

Il file Excel predefinito verrà visualizzato quando avvierai l’applicazione per la prima volta.

Visualizzatore di Excel in ASP.NET C#

Apri un file Excel

Per aprire un file Excel, fare clic sul pulsante Sfoglia e selezionare il file dall’elenco.

Sfoglia i file Excel
Apri il file Excel in ASP.NET C#

Tutti i fogli di lavoro nella cartella di lavoro di Excel verranno visualizzati sotto forma di schede. È possibile fare clic sulle schede per navigare tra i fogli di lavoro.

Visualizza file Excel in ASP.NET

Scarica il codice sorgente

Questa applicazione è open source e il suo codice sorgente è disponibile su GitHub.

Ottieni una licenza temporanea per Aspose.Cells per .NET

È possibile ottenere la licenza temporanea di Aspose.Cells per l’API .NET per evitare limitazioni di valutazione/prova.