Visualiseur Excel C# ASP.NET

Voulez-vous afficher des feuilles de calcul Microsoft Excel dans votre application Web ? Vous recherchez une visionneuse Excel ASP.NET MVC ? Si oui, vous avez atterri à un endroit absolument correct. Dans ce blog, vous apprendrez à créer une visionneuse Excel et à afficher des feuilles de calcul Excel dans des applications ASP.NET MVC à l’aide de C#. Après avoir passé quelques minutes et suivi quelques étapes simples, vous aurez votre propre visionneuse Excel (XLS ou XLSX) opérationnelle. Alors commençons.

Fonctionnalités de la visionneuse Excel ASP.NET MVC

Notre visionneuse Excel ASP.NET aura les fonctionnalités suivantes et vous pourrez les améliorer selon vos besoins.

  1. Parcourir et afficher les fichiers Excel.
  2. Charger le fichier Excel par défaut au chargement de la page.
  3. Onglets pour naviguer entre les feuilles de calcul Excel.

Étapes pour créer une visionneuse Excel dans ASP.NET MVC

Voici quelques étapes simples pour afficher les fichiers Excel dans ASP.NET MVC.

  1. Créez une nouvelle application Web ASP.NET MVC dans Visual Studio.
Application Web ASP.NET MVC
  1. Ouvrez le gestionnaire de packages NuGet et installez le package Aspose.Cells for .NET.
Afficher les fichiers Excel dans ASP.NET dans le navigateur

  1. Créez un nouveau dossier “Documents” pour conserver les fichiers Excel et un sous-dossier “Rendered” pour enregistrer les images rendues.

  2. Créez un nouveau dossier avec le nom “Helpers” dans le dossier racine.

  3. Créez une nouvelle classe avec le nom “Sheet” dans le dossier “Helpers” pour stocker les informations des feuilles de calcul Excel.

public class Sheet
{
	public string SheetName { get; set; }
	public string Path { get; set; }
}
  1. Ouvrez la classe “HomeController” et remplacez son code par ce qui suit. Assurez-vous de remplacer le nom du fichier Excel par défaut dans l’action Index.
public class HomeController : Controller
{
	public List<Sheet> sheets;

	[HttpGet]
	public ActionResult Index(string fileName)
	{
		sheets = new List<Sheet>();
		if (fileName == null)
		{
			// Afficher la feuille de calcul par défaut au chargement de la page
			sheets = RenderExcelWorksheetsAsImage("Workbook.xlsx");
		}
		else
		{
			sheets = RenderExcelWorksheetsAsImage(fileName);
		}

		return View(sheets);
	}
	public List<Sheet> RenderExcelWorksheetsAsImage(string FileName)
	{
		// Charger le classeur Excel 
		Workbook book = new Workbook(Server.MapPath(Path.Combine("~/Documents", FileName)));
		var workSheets = new List<Sheet>();
		// Définir les options de rendu d'image
		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("~/");

		// Créer un rendu de classeur Excel
		WorkbookRender wr = new WorkbookRender(book, options);
		// Enregistrer et afficher des feuilles de calcul
		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. Ouvrez Views/Home/index.cshtml et remplacez son contenu par le script suivant.
@{
    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. Créez l’application et exécutez-la dans votre navigateur préféré.

Afficher des fichiers Excel dans ASP.NET MVC Viewer - Démo

Le fichier Excel par défaut s’affichera lorsque vous démarrerez l’application pour la première fois.

Visionneuse Excel dans ASP.NET C#

Ouvrir un fichier Excel

Pour ouvrir un fichier Excel, cliquez sur le bouton Parcourir et sélectionnez le fichier dans la liste.

Parcourir les fichiers Excel
Ouvrir le fichier Excel dans ASP.NET C#

Toutes les feuilles de calcul du classeur Excel seront affichées sous forme d’onglets. Vous pouvez cliquer sur les onglets pour naviguer entre les feuilles de calcul.

Afficher les fichiers Excel dans ASP.NET

Télécharger le code source

Cette application est open source et son code source est disponible sur GitHub.

Obtenez une licence temporaire pour Aspose.Cells for .NET

Vous pouvez obtenir la licence temporaire d’Aspose.Cells for .NET afin d’éviter les limitations d’évaluation/d’essai.