C# ASP.NET-Excel-Viewer

Möchten Sie Microsoft Excel-Arbeitsblätter in Ihrer Webanwendung anzeigen? Suchen Sie einen ASP.NET MVC Excel Viewer? Wenn ja, sind Sie an einer absolut richtigen Stelle gelandet. In diesem Blog erfahren Sie, wie Sie einen Excel Viewer erstellen und Excel-Arbeitsblätter in ASP.NET MVC Anwendungen mit C# anzeigen. Nachdem Sie einige Minuten damit verbracht haben und einige einfache Schritte befolgt haben, haben Sie Ihren eigenen Excel (XLS oder XLSX) Viewer zum Laufen. Fangen wir also an.

Funktionen von ASP.NET MVC Excel Viewer

Unser ASP.NET Excel Viewer verfügt über die folgenden Funktionen, die Sie gemäß Ihren Anforderungen erweitern können.

  1. Durchsuchen und Anzeigen von Excel Dateien.
  2. Standard-Excel Datei beim Laden der Seite laden.
  3. Registerkarten zum Navigieren zwischen Excel Arbeitsblättern.

Schritte zum Erstellen von Excel Viewer in ASP.NET MVC

Im Folgenden finden Sie einige einfache Schritte zum Anzeigen von Excel Dateien in ASP.NET MVC.

  1. Erstellen Sie eine neue ASP.NET MVC Webanwendung in Visual Studio.
ASP.NET MVC Webanwendung
  1. Öffnen Sie den NuGet Package Manager und installieren Sie das Paket Aspose.Cells for .NET.
Zeigen Sie Excel Dateien in ASP.NET im Browser an

  1. Erstellen Sie einen neuen Ordner „Documents“, um die Excel Dateien zu behalten, und einen Unterordner „Rendered“, um gerenderte Bilder zu speichern.

  2. Erstellen Sie im Stammordner einen neuen Ordner mit dem Namen „Helpers“.

  3. Erstellen Sie im Ordner „Helpers“ eine neue Klasse mit dem Namen „Sheet“, um die Informationen der Excel-Arbeitsblätter zu speichern.

public class Sheet
{
	public string SheetName { get; set; }
	public string Path { get; set; }
}
  1. Öffnen Sie die Klasse HomeController und ersetzen Sie ihren Code durch den folgenden. Stellen Sie sicher, dass Sie den Namen der Standard-Excel Datei in der Index-Aktion ersetzen.
public class HomeController : Controller
{
	public List<Sheet> sheets;

	[HttpGet]
	public ActionResult Index(string fileName)
	{
		sheets = new List<Sheet>();
		if (fileName == null)
		{
			// Standardarbeitsblatt beim Laden der Seite anzeigen
			sheets = RenderExcelWorksheetsAsImage("Workbook.xlsx");
		}
		else
		{
			sheets = RenderExcelWorksheetsAsImage(fileName);
		}

		return View(sheets);
	}
	public List<Sheet> RenderExcelWorksheetsAsImage(string FileName)
	{
		// Laden Sie die Excel Arbeitsmappe 
		Workbook book = new Workbook(Server.MapPath(Path.Combine("~/Documents", FileName)));
		var workSheets = new List<Sheet>();
		// Stellen Sie Bildwiedergabeoptionen ein
		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("~/");

		// Renderer für Excel Arbeitsmappen erstellen
		WorkbookRender wr = new WorkbookRender(book, options);
		// Speichern und Anzeigen von Arbeitsblättern
		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. Öffnen Sie Views/Home/index.cshtml und ersetzen Sie den Inhalt durch das folgende Skript.
@{
    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. Erstellen Sie die Anwendung und führen Sie sie in Ihrem bevorzugten Browser aus.

Anzeigen von Excel Dateien in ASP.NET MVC Viewer – Demo

Die Standard-Excel Datei wird angezeigt, wenn Sie die Anwendung zum ersten Mal starten.

Excel-Viewer in ASP.NET C#

Öffnen Sie eine Excel Datei

Um eine Excel Datei zu öffnen, klicken Sie auf die Schaltfläche „Durchsuchen“ und wählen Sie die Datei aus der Liste aus.

Durchsuchen Sie Excel Dateien
Excel Datei in ASP.NET C# öffnen

Alle Arbeitsblätter in der Excel Arbeitsmappe werden in Form von Registerkarten angezeigt. Sie können auf die Registerkarten klicken, um zwischen den Arbeitsblättern zu navigieren.

Zeigen Sie Excel Dateien in ASP.NET an

Quellcode herunterladen

Diese Anwendung ist Open Source und ihr Quellcode ist auf GitHub verfügbar.

Holen Sie sich eine temporäre Lizenz für Aspose.Cells for .NET

Sie können die vorübergehende Lizenz von Aspose.Cells for .NET API erwerben, um Evaluierungs-/Testeinschränkungen zu vermeiden.