ASP.NET PowerPoint Viewer | הצג קבצי PPT/PPTX ב-ASP.NET Core

האם אתה מחפש PowerPoint Viewer כדי להציג או להטמיע מצגות באפליקציית האינטרנט ASP.NET Core שלך? אם כן, המשך לקרוא מאמר זה וללמוד כיצד ליצור ASP.NET Core PowerPoint Viewer פשוט ולהציג מצגות PPT/PPTX באמצעות C#. אז בואו נתחיל.

תכונות של ASP.NET PowerPoint Viewer

ASP.NET PowerPoint Viewer שלנו ישתמש ב-API Aspose.Slides for .NET כדי להציג את שקופיות המצגת כתמונות PNG. לאחר עיבוד השקופיות, נציג אותם באמצעות קרוסלת Bootstrap. התכונות הבאות יהיו של האפליקציה:

דפדף והצג מצגות PowerPoint (PPT/PPTX).
הגדר את ברירת המחדל של קובץ PowerPoint כך שיוצג בעת טעינת העמוד.
מחוון לנווט בין שקופיות.

שלבים ליצירת PowerPoint Viewer ב-ASP.NET Core

להלן כמה שלבים פשוטים ליצירת PowerPoint Viewer ב-ASP.NET Core.

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

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

צור תיקיות מצגות ו-Slides ב-wwwroot כדי לשמור את קבצי ה-PowerPoint ואת השקופיות המעובדות בהתאמה.

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

public class Slide
{
	public int SlideNumber { get; set; }
	public string Path { get; set; }
}

פתח את ה-“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;
	}
}

פתח את Views/Home/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>

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

ראה גם

אפשרויות נוספות עבור מציג מצגות עם Aspose.Slides

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

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

טיפ: אולי תרצה לבדוק יישום חי של פעולות צפייה למצגות.

תכונות של ASP.NET PowerPoint Viewer#

שלבים ליצירת PowerPoint Viewer ב-ASP.NET Core#

ראה גם#

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

תכונות של ASP.NET PowerPoint Viewer

שלבים ליצירת PowerPoint Viewer ב-ASP.NET Core

ראה גם

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