Vill du visa Microsoft Excel-kalkylblad i din webbapplikation? Letar du efter en ASP.NET MVC Excel Viewer? Om ja, har du landat på en helt korrekt plats. I den här bloggen kommer du att lära dig hur du skapar en Excel Viewer och visar Excel-kalkylblad i ASP.NET MVC-applikationer med C#. Efter att ha spenderat några minuter och följt några enkla steg kommer du att ha din egen Excel (XLS eller XLSX) Viewer igång. Så låt oss börja.
Funktioner i ASP.NET MVC Excel Viewer
Vår ASP.NET Excel Viewer kommer att ha följande funktioner och du kan förbättra dem enligt dina krav.
- Bläddra och visa Excel-filer.
- Ladda standard Excel-fil vid sidladdning.
- Flikar för att navigera mellan Excel-kalkylblad.
Steg för att skapa Excel Viewer i ASP.NET MVC
Följande är några enkla steg för att visa Excel-filer i ASP.NET MVC.
- Skapa en ny ASP.NET MVC-webbapplikation i Visual Studio.
- Öppna NuGet Package Manager och installera paketet Aspose.Cells for .NET.
Skapa en ny mapp “Dokument” för att behålla Excel-filerna och en undermapp “Rendered” för att spara renderade bilder.
Skapa en ny mapp med namnet “Hjälpare” i rotmappen.
Skapa en ny klass med namnet “Sheet” i mappen “Hjälpare” för att lagra informationen i Excel-kalkylbladen.
public class Sheet
{
public string SheetName { get; set; }
public string Path { get; set; }
}
- Öppna klassen “HomeController” och ersätt dess kod med följande. Se till att ersätta standard Excel-filens namn i indexåtgärden.
public class HomeController : Controller
{
public List<Sheet> sheets;
[HttpGet]
public ActionResult Index(string fileName)
{
sheets = new List<Sheet>();
if (fileName == null)
{
// Visa standardkalkylblad vid sidladdning
sheets = RenderExcelWorksheetsAsImage("Workbook.xlsx");
}
else
{
sheets = RenderExcelWorksheetsAsImage(fileName);
}
return View(sheets);
}
public List<Sheet> RenderExcelWorksheetsAsImage(string FileName)
{
// Ladda Excel-arbetsboken
Workbook book = new Workbook(Server.MapPath(Path.Combine("~/Documents", FileName)));
var workSheets = new List<Sheet>();
// Ställ in alternativ för bildåtergivning
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("~/");
// Skapa Excel-arbetsboksrenderare
WorkbookRender wr = new WorkbookRender(book, options);
// Spara och visa arbetsblad
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;
}
}
- Öppna Views/Home/index.cshtml och ersätt dess innehåll med följande 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">×</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>
- Bygg programmet och kör det i din favoritwebbläsare.
Visa Excel-filer i ASP.NET MVC Viewer - Demo
Standard Excel-filen kommer att visas när du startar programmet för första gången.
Öppna en Excel-fil
För att öppna en Excel-fil, klicka på bläddringsknappen och välj filen från listan.
Navigera mellan Excel-kalkylblad med flikar
Alla kalkylblad i Excel-arbetsboken kommer att visas i form av flikar. Du kan klicka på flikarna för att navigera mellan kalkylbladen.
Ladda ner källkod
Denna applikation är öppen källkod och dess källkod är tillgänglig på GitHub.
Skaffa en tillfällig licens för Aspose.Cells för .NET
Du kan skaffa den tillfälliga licensen av Aspose.Cells för .NET API för att undvika utvärderings-/testbegränsningar.