Penampil PowerPoint ASP.NET | Tampilkan File PPT/PPTX di ASP.NET Core

Apakah Anda mencari PowerPoint Viewer untuk melihat atau menyematkan presentasi di aplikasi web ASP.NET Core Anda? Jika ya, lanjutkan membaca artikel ini dan pelajari cara membuat ASP.NET Core PowerPoint Viewer sederhana dan menampilkan presentasi PPT/PPTX menggunakan C#. Jadi mari kita mulai.

Fitur Penampil PowerPoint ASP.NET

ASP.NET PowerPoint Viewer kami akan menggunakan Aspose.Slides for .NET API untuk merender slide presentasi sebagai gambar PNG. Setelah slide dirender, kami akan menampilkannya menggunakan Bootstrap Carousel. Berikut ini akan menjadi fitur dari aplikasi:

Telusuri dan lihat presentasi PowerPoint (PPT/PPTX).
Tetapkan file PowerPoint default untuk ditampilkan saat pemuatan halaman.
Slider untuk bernavigasi di antara slide.

Langkah-langkah Membuat PowerPoint Viewer di ASP.NET Core

Berikut ini adalah beberapa langkah mudah untuk membuat PowerPoint Viewer di ASP.NET Core.

Buat Aplikasi Web Inti ASP.NET baru di Visual Studio.

Buka NuGet Package Manager dan instal paket Aspose.Slides for .NET.

Buat folder Presentasi dan Slide di wwwroot untuk menyimpan file PowerPoint dan slide yang dirender.

Buat folder baru dengan nama “Helpers” di folder root.
Buat kelas baru dengan nama “Slide” pada folder “Helpers” untuk menyimpan informasi slide presentasi.

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

Buka “HomeController.cs” dan ganti kodenya dengan yang berikut (Perbarui nama file PowerPoint default dalam tindakan Indeks).

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)
		{
			// Tampilkan file PowerPoint default saat memuat halaman
			slides = RenderPresentationAsImage("presentation.pptx");
		}
		else
		{
			slides = RenderPresentationAsImage(fileName);
		}

		return View(slides);
	}
	public List<Helper.Slide> RenderPresentationAsImage(string FileName)
	{
		var webRoot = _env.WebRootPath;
		// Muat presentasi PowerPoint
		Presentation presentation = new Presentation(Path.Combine(webRoot, "Presentations", FileName));
		var slides = new List<Helper.Slide>();

		string imagePath = "";
		// Simpan dan lihat slide presentasi
		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);
			// Tambahkan ke daftar
			slides.Add(new Helper.Slide { SlideNumber = j, Path = string.Format("slide_{0}.png", j) });
		}

		return slides;
	}
}

Buka Views/Home/index.cshtml dan ganti isinya dengan yang berikut ini.

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

Bangun aplikasi dan jalankan di browser favorit Anda.

Lihat juga

Pilihan lainnya untuk Presentation Viewer dengan Aspose.Slides

Dapatkan Lisensi Sementara untuk Aspose.Slides for .NET

Anda bisa mendapatkan lisensi sementara dari Aspose.Slides for .NET untuk menghindari batasan uji coba.

Tip: Anda mungkin ingin melihat penerapan langsung dari operasi tampilan untuk presentasi.

Fitur Penampil PowerPoint ASP.NET#

Langkah-langkah Membuat PowerPoint Viewer di ASP.NET Core#

Lihat juga#

Dapatkan Lisensi Sementara untuk Aspose.Slides for .NET#

Fitur Penampil PowerPoint ASP.NET

Langkah-langkah Membuat PowerPoint Viewer di ASP.NET Core

Lihat juga

Dapatkan Lisensi Sementara untuk Aspose.Slides for .NET