C# ASP.NET Excel Viewer | פתח או הצג קובץ Excel ב-ASP.NET ב-C#

האם ברצונך להציג גליונות עבודה של Microsoft Excel בתוך יישום האינטרנט שלך? האם אתה מחפש ASP.NET MVC Excel Viewer? אם כן, נחתת במקום נכון לחלוטין. בבלוג זה, תלמד כיצד ליצור מציג Excel ולהציג גליונות עבודה של Excel ביישומי ASP.NET MVC באמצעות C#. לאחר שהקדשת מספר דקות וביצוע מספר שלבים פשוטים, יהיה לך מציג Excel (XLS או XLSX) משלך. אז בואו נתחיל.

תכונות של ASP.NET MVC Excel Viewer

ASP.NET Excel Viewer שלנו יכלול את התכונות הבאות ותוכל לשפר אותן בהתאם לדרישות שלך.

דפדף והצג קבצי אקסל.
טען את קובץ ברירת המחדל של Excel בעת טעינת העמוד.
כרטיסיות לנווט בין גליונות עבודה של Excel.

שלבים ליצירת Excel Viewer ב-ASP.NET MVC

להלן כמה שלבים פשוטים להצגת קובצי Excel ב-ASP.NET MVC.

צור יישום אינטרנט חדש של ASP.NET MVC ב-Visual Studio.

פתח את NuGet Package Manager והתקן את חבילת Aspose.Cells for .NET.

צור תיקיה חדשה “מסמכים” כדי לשמור את קבצי האקסל ותת-תיקיית “Rendered” לשמירת תמונות שעובדו.
צור תיקיה חדשה עם השם “עזרים” בתיקיית השורש.
צור מחלקה חדשה בשם “גיליון” בתיקיית “עוזרים” כדי לאחסן את המידע של גליונות האקסל.

public class Sheet
{
	public string SheetName { get; set; }
	public string Path { get; set; }
}

פתח את המחלקה “HomeController” והחלף את הקוד שלה בקוד הבא. הקפד להחליף את שם ברירת המחדל של קובץ Excel בפעולת אינדקס.

public class HomeController : Controller
{
	public List<Sheet> sheets;

	[HttpGet]
	public ActionResult Index(string fileName)
	{
		sheets = new List<Sheet>();
		if (fileName == null)
		{
			// הצג גליון עבודה ברירת מחדל בעת טעינת העמוד
			sheets = RenderExcelWorksheetsAsImage("Workbook.xlsx");
		}
		else
		{
			sheets = RenderExcelWorksheetsAsImage(fileName);
		}

		return View(sheets);
	}
	public List<Sheet> RenderExcelWorksheetsAsImage(string FileName)
	{
		// טען את חוברת העבודה של Excel 
		Workbook book = new Workbook(Server.MapPath(Path.Combine("~/Documents", FileName)));
		var workSheets = new List<Sheet>();
		// הגדר אפשרויות עיבוד תמונה
		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("~/");

		// צור מעבד חוברות עבודה של Excel
		WorkbookRender wr = new WorkbookRender(book, options);
		// שמור והצג דפי עבודה
		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;
	}
}

פתח את Views/Home/index.cshtml והחלף את התוכן שלו בסקריפט הבא.

@{
    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>

בנה את האפליקציה והפעל אותה בדפדפן המועדף עליך.

הצג קבצי Excel ב-ASP.NET MVC Viewer - הדגמה

קובץ ה-Excel המוגדר כברירת מחדל יוצג כאשר תפעיל את היישום בפעם הראשונה.

פתח קובץ אקסל

על מנת לפתוח קובץ אקסל, לחץ על כפתור העיון ובחר את הקובץ מהרשימה.

נווט בין גליונות עבודה של Excel באמצעות כרטיסיות

כל גליונות העבודה בחוברת העבודה של Excel יוצגו בצורה של כרטיסיות. אתה יכול ללחוץ על הכרטיסיות כדי לנווט בין גליונות עבודה.

הורד את קוד המקור

יישום זה הוא קוד פתוח וקוד המקור שלו זמין ב-GitHub.

קבל רישיון זמני עבור Aspose.Cells עבור .NET

אתה יכול לקבל את הרישיון הזמני של Aspose.Cells עבור .NET API כדי להימנע ממגבלות הערכה/ניסיון.

תכונות של ASP.NET MVC Excel Viewer#

שלבים ליצירת Excel Viewer ב-ASP.NET MVC#

הצג קבצי Excel ב-ASP.NET MVC Viewer - הדגמה#

פתח קובץ אקסל#

נווט בין גליונות עבודה של Excel באמצעות כרטיסיות#

הורד את קוד המקור#

קבל רישיון זמני עבור Aspose.Cells עבור .NET#