Trình xem PowerPoint ASP.NET | Hiển thị tệp PPT/PPTX trong ASP.NET Core

Bạn đang tìm kiếm Trình xem PowerPoint để xem hoặc nhúng bản trình bày trong ứng dụng web ASP.NET Core của mình? Nếu có, hãy tiếp tục đọc bài viết này và tìm hiểu cách tạo một ASP.NET Core PowerPoint Viewer đơn giản và hiển thị các bản trình bày PPT/PPTX bằng C#. Vì vậy, hãy bắt đầu.

Các tính năng của ASP.NET PowerPoint Viewer

Trình xem ASP.NET PowerPoint của chúng tôi sẽ sử dụng API Aspose.Slides for .NET để hiển thị các trang trình bày dưới dạng hình ảnh PNG. Sau khi các trang chiếu được hiển thị, chúng tôi sẽ hiển thị chúng bằng Bootstrap Carousel. Sau đây sẽ là các tính năng của ứng dụng:

Duyệt và xem bản trình bày PowerPoint (PPT/PPTX).
Đặt tệp PowerPoint mặc định sẽ được hiển thị khi tải trang.
Thanh trượt để điều hướng giữa các trang chiếu.

Các bước để tạo Trình xem PowerPoint trong ASP.NET Core

Sau đây là một số bước đơn giản để tạo Trình xem PowerPoint trong ASP.NET Core.

Tạo một ứng dụng web ASP.NET Core mới trong Visual Studio.

Mở Trình quản lý gói NuGet và cài đặt gói Aspose.Slides for .NET.

Tạo các thư mục Bản trình bày và Trang trình bày trong wwwroot để giữ các tệp PowerPoint và các trang trình bày được hiển thị tương ứng.

Tạo một thư mục mới với tên “Người trợ giúp” trong thư mục gốc.
Tạo một lớp mới với tên “Slide” trong thư mục “Helpers” để lưu trữ thông tin của các slide thuyết trình.

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

Mở “HomeController.cs” và thay thế mã của nó bằng mã sau (Cập nhật tên tệp PowerPoint mặc định trong hành động Chỉ mục).

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)
		{
			// Hiển thị tệp PowerPoint mặc định khi tải trang
			slides = RenderPresentationAsImage("presentation.pptx");
		}
		else
		{
			slides = RenderPresentationAsImage(fileName);
		}

		return View(slides);
	}
	public List<Helper.Slide> RenderPresentationAsImage(string FileName)
	{
		var webRoot = _env.WebRootPath;
		// Tải bản trình bày PowerPoint
		Presentation presentation = new Presentation(Path.Combine(webRoot, "Presentations", FileName));
		var slides = new List<Helper.Slide>();

		string imagePath = "";
		// Lưu và xem slide thuyết trình
		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);
			// Thêm vào danh sách
			slides.Add(new Helper.Slide { SlideNumber = j, Path = string.Format("slide_{0}.png", j) });
		}

		return slides;
	}
}

Mở Views/Home/index.cshtml và thay thế nội dung của nó bằng nội dung sau.

@{
    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>

Xây dựng ứng dụng và chạy nó trên trình duyệt yêu thích của bạn.

Xem thêm

Các tùy chọn khác cho Trình xem bản trình bày với Aspose.Slides

Nhận giấy phép tạm thời cho Aspose.Slides for .NET

Bạn có thể lấy giấy phép tạm thời của Aspose.Slides for .NET để tránh các giới hạn dùng thử.

Mẹo: Bạn có thể muốn xem triển khai trực tiếp các thao tác xem cho bản trình bày.

Các tính năng của ASP.NET PowerPoint Viewer#

Các bước để tạo Trình xem PowerPoint trong ASP.NET Core#

Xem thêm#

Nhận giấy phép tạm thời cho Aspose.Slides for .NET#

Các tính năng của ASP.NET PowerPoint Viewer

Các bước để tạo Trình xem PowerPoint trong ASP.NET Core

Xem thêm

Nhận giấy phép tạm thời cho Aspose.Slides for .NET