عارض Excel C# ASP.NET | فتح أو عرض ملف Excel في ASP.NET في C#

هل تريد عرض أوراق عمل Microsoft Excel داخل تطبيق الويب الخاص بك؟ هل تبحث عن برنامج ASP.NET MVC Excel Viewer؟ إذا كانت الإجابة بنعم ، فقد هبطت في مكان صحيح تمامًا. في هذه المدونة ، ستتعلم كيفية إنشاء برنامج Excel Viewer وعرض أوراق عمل Excel في تطبيقات ASP.NET MVC باستخدام C#. بعد قضاء بضع دقائق واتباع بعض الخطوات البسيطة ، سيكون لديك عارض Excel (XLS أو XLSX) الخاص بك وتشغيله. فلنبدأ.

ميزات ASP.NET MVC Excel Viewer

سيحتوي عارض ASP.NET Excel على الميزات التالية ويمكنك تحسينها وفقًا لمتطلباتك.

تصفح وعرض ملفات Excel.
قم بتحميل ملف Excel الافتراضي عند تحميل الصفحة.
علامات التبويب للتنقل بين أوراق عمل Excel.

خطوات إنشاء عارض Excel في ASP.NET MVC

فيما يلي بعض الخطوات السهلة لعرض ملفات Excel في ASP.NET MVC.

قم بإنشاء تطبيق ويب ASP.NET MVC جديد في Visual Studio.

افتح NuGet Package Manager وقم بتثبيت حزمة Aspose.Cells for .NET.

أنشئ مجلدًا جديدًا “مستندات” للاحتفاظ بملفات Excel ومجلد فرعي “معروض” لحفظ الصور المقدمة.
قم بإنشاء مجلد جديد باسم “Helpers” في المجلد الجذر.
قم بإنشاء فئة جديدة باسم “Sheet” في مجلد “Helpers” لتخزين معلومات أوراق عمل Excel.

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;
	}
}

افتح طرق العرض / الصفحة الرئيسية / 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 - عرض توضيحي

سيتم عرض ملف Excel الافتراضي عند بدء تشغيل التطبيق لأول مرة.

افتح ملف Excel

لفتح ملف Excel ، انقر فوق الزر “استعراض” وحدد الملف من القائمة.

التنقل بين أوراق عمل Excel باستخدام علامات التبويب

سيتم عرض جميع أوراق العمل الموجودة في مصنف Excel في شكل علامات تبويب. يمكنك النقر فوق علامات التبويب للتنقل بين أوراق العمل.

تحميل شفرة المصدر

هذا التطبيق مفتوح المصدر وكود المصدر الخاص به متاح على GitHub.

احصل على ترخيص مؤقت لـ Aspose.Cells for .NET

يمكنك الحصول على الترخيص المؤقت من Aspose.Cells لـ .NET API لتجنب قيود التقييم / التجربة.

ميزات ASP.NET MVC Excel Viewer#

خطوات إنشاء عارض Excel في ASP.NET MVC#

عرض ملفات Excel في عارض ASP.NET MVC - عرض توضيحي#

افتح ملف Excel#

التنقل بين أوراق عمل Excel باستخدام علامات التبويب#

تحميل شفرة المصدر#

احصل على ترخيص مؤقت لـ Aspose.Cells for .NET#