ASP.NET 파워포인트 뷰어 | ASP.NET Core에서 PPT/PPTX 파일 표시

ASP.NET Core 웹 응용 프로그램에서 프레젠테이션을 보거나 포함할 PowerPoint 뷰어를 찾고 있습니까? 그렇다면 이 문서를 계속 읽고 간단한 ASP.NET Core PowerPoint Viewer를 만들고 C#을 사용하여 PPT/PPTX 프레젠테이션을 표시하는 방법을 배우십시오. 시작하겠습니다.

ASP.NET PowerPoint 뷰어의 기능

ASP.NET PowerPoint 뷰어는 Aspose.Slides for .NET API를 사용하여 프레젠테이션 슬라이드를 PNG 이미지로 렌더링합니다. 슬라이드가 렌더링되면 Bootstrap Carousel을 사용하여 슬라이드를 표시합니다. 다음은 응용 프로그램의 기능입니다.

PowerPoint(PPT/PPTX) 프레젠테이션을 찾아보고 봅니다.
페이지 로드 시 표시할 기본 PowerPoint 파일을 설정합니다.
슬라이드 사이를 탐색하는 슬라이더입니다.

ASP.NET Core에서 PowerPoint 뷰어를 만드는 단계

다음은 ASP.NET Core에서 PowerPoint Viewer를 만드는 몇 가지 쉬운 단계입니다.

Visual Studio에서 새 ASP.NET Core 웹 응용 프로그램을 만듭니다.

NuGet 패키지 관리자를 열고 Aspose.Slides for .NET 패키지를 설치합니다.

wwwroot에 Presentations 및 Slides 폴더를 만들어 PowerPoint 파일과 렌더링된 슬라이드를 각각 유지합니다.

루트 폴더에 이름이 “Helpers"인 새 폴더를 만듭니다.
“Helpers” 폴더에 “Slide"라는 이름으로 새 클래스를 만들어 프레젠테이션 슬라이드 정보를 저장합니다.

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가 있는 프레젠테이션 뷰어에 대한 추가 옵션

.NET용 Aspose.Slides용 임시 라이선스 받기

평가판 제한을 피하기 위해 .NET용 Aspose.Slides의 임시 라이선스를 얻을 수 있습니다.

팁: 프레젠테이션을 위한 보기 작업의 실시간 구현을 확인하는 것이 좋습니다.

ASP.NET PowerPoint 뷰어의 기능#

ASP.NET Core에서 PowerPoint 뷰어를 만드는 단계#

또한보십시오#

.NET용 Aspose.Slides용 임시 라이선스 받기#

ASP.NET PowerPoint 뷰어의 기능

ASP.NET Core에서 PowerPoint 뷰어를 만드는 단계

또한보십시오

.NET용 Aspose.Slides용 임시 라이선스 받기