C# ASP.NET Excel Viewer | باز کردن یا نمایش فایل اکسل در ASP.NET در سی شارپ

آیا می خواهید کاربرگ های Microsoft Excel را در برنامه وب خود نمایش دهید؟ آیا به دنبال ASP.NET MVC Excel Viewer هستید؟ اگر بله، شما در یک مکان کاملاً صحیح فرود آمده اید. در این وبلاگ با نحوه ایجاد Excel Viewer و نمایش کاربرگ های Excel در برنامه های ASP.NET MVC با استفاده از سی شارپ آشنا می شوید. پس از صرف چند دقیقه و انجام چند مرحله ساده، نمایشگر اکسل (XLS یا XLSX) خود را آماده و اجرا خواهید کرد. پس بیایید شروع کنیم.

ویژگی های ASP.NET MVC Excel Viewer

ASP.NET Excel Viewer ما دارای ویژگی های زیر است و شما می توانید آنها را مطابق با نیاز خود ارتقا دهید.

مرور و مشاهده فایل های اکسل.
فایل اکسل پیش فرض را در بارگذاری صفحه بارگیری کنید.
برگه ها برای حرکت بین کاربرگ های اکسل.

مراحل ایجاد Excel Viewer در ASP.NET MVC

در زیر چند مرحله آسان برای مشاهده فایل های اکسل در ASP.NET MVC آورده شده است.

یک برنامه وب جدید ASP.NET MVC در ویژوال استودیو ایجاد کنید.

NuGet Package Manager را باز کنید و بسته Aspose.Cells for .NET را نصب کنید.

مشاهده فایل های اکسل در ASP.NET در مرورگر

یک پوشه جدید “Documents” برای نگهداری فایل های Excel و یک زیر پوشه “Rendered” برای ذخیره تصاویر رندر شده ایجاد کنید.
یک پوشه جدید با نام “Helpers” در پوشه ریشه ایجاد کنید.
یک کلاس جدید با نام “Sheet” در پوشه “Helpers” ایجاد کنید تا اطلاعات کاربرگ های Excel را ذخیره کنید.

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

کلاس “HomeController” را باز کرده و کد آن را با کد زیر جایگزین کنید. مطمئن شوید که نام فایل اکسل پیش فرض را در اقدام Index جایگزین کنید.

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)
	{
		// کتاب کار اکسل را بارگیری کنید 
		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("~/");

		// ایجاد رندر کتاب کار اکسل
		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>

برنامه را بسازید و در مرورگر مورد علاقه خود اجرا کنید.

مشاهده فایل های اکسل در ASP.NET MVC Viewer - Demo

هنگامی که برنامه را برای اولین بار راه اندازی می کنید، فایل اکسل پیش فرض نمایش داده می شود.

یک فایل اکسل را باز کنید

برای باز کردن یک فایل اکسل، روی دکمه مرور کلیک کنید و فایل را از لیست انتخاب کنید.

با استفاده از Tabs بین کاربرگ های اکسل حرکت کنید

تمامی کاربرگ های کتاب کار اکسل به صورت تب نمایش داده می شوند. برای پیمایش بین کاربرگ ها می توانید روی برگه ها کلیک کنید.

کد منبع را دانلود کنید

این برنامه منبع باز است و کد منبع آن در GitHub موجود است.

یک مجوز موقت برای Aspose.Cells برای دات نت دریافت کنید

می‌توانید مجوز موقت Aspose.Cells را برای NET API دریافت کنید تا از محدودیت‌های ارزیابی/آزمایی جلوگیری کنید.

ویژگی های ASP.NET MVC Excel Viewer#

مراحل ایجاد Excel Viewer در ASP.NET MVC#

مشاهده فایل های اکسل در ASP.NET MVC Viewer - Demo#

یک فایل اکسل را باز کنید#

با استفاده از Tabs بین کاربرگ های اکسل حرکت کنید#

کد منبع را دانلود کنید#

یک مجوز موقت برای Aspose.Cells برای دات نت دریافت کنید#