عرض PPT PPTX في ASP.NET Core

هل تبحث عن عارض PowerPoint لعرض العروض التقديمية أو تضمينها في تطبيق الويب ASP.NET Core؟ إذا كانت الإجابة بنعم ، فاستمر في قراءة هذه المقالة وتعلم كيفية إنشاء عارض ASP.NET Core PowerPoint بسيط وعرض عروض PPT / PPTX التقديمية باستخدام C#. فلنبدأ.

ميزات عارض ASP.NET PowerPoint

سيستخدم عارض ASP.NET PowerPoint الخاص بنا Aspose.Slides for .NET API لعرض شرائح العرض على هيئة صور PNG. بمجرد عرض الشرائح ، سنعرضها باستخدام Bootstrap Carousel. سيكون ما يلي من ميزات التطبيق:

  1. تصفح واعرض عروض PowerPoint التقديمية (PPT / PPTX).
  2. قم بتعيين ملف PowerPoint الافتراضي ليتم عرضه عند تحميل الصفحة.
  3. شريط التمرير للتنقل بين الشرائح.

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

فيما يلي بعض الخطوات السهلة لإنشاء عارض PowerPoint في ASP.NET Core.

  1. قم بإنشاء تطبيق ويب ASP.NET Core جديد في Visual Studio.
إنشاء عارض ASP.NET PowerPoint
  1. افتح NuGet Package Manager وقم بتثبيت حزمة Aspose.Slides for .NET.
عرض الشرائح ASP.NET PowerPoint
  1. إنشاء مجلدات العروض التقديمية والشرائح في wwwroot للاحتفاظ بملفات PowerPoint والشرائح المعروضة على التوالي.
عرض شرائح PowerPoint في ASP.NET

  1. قم بإنشاء مجلد جديد باسم “Helpers” في المجلد الجذر.

  2. قم بإنشاء فئة جديدة باسم “Slide” في مجلد “Helpers” لتخزين معلومات شرائح العرض التقديمي.

public class Slide
{
	public int SlideNumber { get; set; }
	public string Path { get; set; }
}
  1. افتح “HomeController.cs” واستبدل الكود الخاص به بما يلي (قم بتحديث اسم ملف PowerPoint الافتراضي في إجراء الفهرس).
public class HomeController : Controller
{
	public List<Helper.Slide> slides;
	public IHostingEnvironment _env;
	public HomeController(IHostingEnvironment env)
	{
		_env = env;
	}
	[HttpGet]
	public ActionResult Index(string fileName)
	{
		slides = new List<Helper.Slide>();
		if (fileName == null)
		{
			// عرض ملف PowerPoint الافتراضي عند تحميل الصفحة
			slides = RenderPresentationAsImage("presentation.pptx");
		}
		else
		{
			slides = RenderPresentationAsImage(fileName);
		}

		return View(slides);
	}
	public List<Helper.Slide> RenderPresentationAsImage(string FileName)
	{
		var webRoot = _env.WebRootPath;
		// قم بتحميل عرض PowerPoint التقديمي
		Presentation presentation = new Presentation(Path.Combine(webRoot, "Presentations", FileName));
		var slides = new List<Helper.Slide>();

		string imagePath = "";
		// حفظ وعرض شرائح العرض
		for (int j = 0; j < presentation.Slides.Count; j++)
		{
			ISlide sld = presentation.Slides[j];
			Bitmap bmp = sld.GetThumbnail(1f, 1f);
			imagePath = Path.Combine(webRoot, "Slides", string.Format("slide_{0}.png", j));
			bmp.Save(imagePath, System.Drawing.Imaging.ImageFormat.Png);
			// أضف إلى القائمة
			slides.Add(new Helper.Slide { SlideNumber = j, Path = string.Format("slide_{0}.png", j) });
		}

		return slides;
	}
}
  1. افتح طرق العرض / الصفحة الرئيسية / index.cshtml واستبدل محتواه بما يلي.
@{
    ViewData["Title"] = "PowerPoint Viewer";
}
@{
    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>Slides Viewer</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.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-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                    </button>
                    <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">PowerPoint Viewer</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li style="cursor: pointer;"><a data-toggle="modal" data-target="#exampleModal">Browse</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <br />
        <div id="myCarousel" class="carousel slide" data-interval="false">
            <div class="carousel-inner" role="listbox" style="width:100%; height: auto !important;">
                @for (int i = 0; i < Model.Count; i++)
                {
                    if (i == 0)
                    {
                        <div class="item active">
                            <img src="~/Slides/@Model[i].Path" style="width: 80%; height: auto; margin:auto !important" class="img-responsive " />
                            <p style="text-align:center;">
                                <strong> @(Model[i].SlideNumber + 1)/@Model.Count</strong>
                            </p>
                        </div>
                    }
                    else
                    {
                        <div class="item">
                            <img src="~/Slides/@Model[i].Path" style="width: 80%; height: auto; margin:auto !important" class="img-responsive " />
                            <p style="text-align:center;">
                                <strong> @(Model[i].SlideNumber + 1)/@Model.Count</strong>
                            </p>
                        </div>
                    }
                }
            </div>
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </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 file in System.IO.Directory.EnumerateFiles("wwwroot/Presentations","*"))
                        {
                            string fileName = System.IO.Path.GetFileName(file);
                            @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>

    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>

    <script src="~/js/site.min.js" asp-append-version="true"></script>
</body>
</html>
  1. قم ببناء التطبيق وتشغيله في متصفحك المفضل.
عارض PowerPoint في ASP.NET Core

أنظر أيضا

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

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

نصيحة: قد ترغب في التحقق من التنفيذ المباشر لعمليات المشاهدة للعروض التقديمية.