Visualizza PPT PPTX in ASP.NET Core

Stai cercando un visualizzatore di PowerPoint per visualizzare o incorporare presentazioni nella tua applicazione Web ASP.NET Core? In caso affermativo, continua a leggere questo articolo e scopri come creare un semplice visualizzatore di PowerPoint ASP.NET Core e visualizzare presentazioni PPT/PPTX usando C#. Quindi iniziamo.

Caratteristiche del visualizzatore di PowerPoint ASP.NET

Il nostro visualizzatore di PowerPoint ASP.NET utilizzerà l’API Aspose.Slides for .NET per eseguire il rendering delle diapositive della presentazione come immagini PNG. Una volta che le diapositive sono state renderizzate, le mostreremo usando il Bootstrap Carousel. Le seguenti saranno le caratteristiche dell’applicazione:

  1. Sfoglia e visualizza le presentazioni PowerPoint (PPT/PPTX).
  2. Imposta il file PowerPoint predefinito da visualizzare al caricamento della pagina.
  3. Dispositivo di scorrimento per navigare tra le diapositive.

Passaggi per creare un visualizzatore di PowerPoint in ASP.NET Core

Di seguito sono riportati alcuni semplici passaggi per creare un visualizzatore di PowerPoint in ASP.NET Core.

  1. Creare una nuova applicazione Web ASP.NET Core in Visual Studio.
Crea visualizzatore di PowerPoint ASP.NET
  1. Aprire Gestione pacchetti NuGet e installare il pacchetto Aspose.Slides for .NET.
Presentazione di PowerPoint ASP.NET
  1. Crea cartelle Presentazioni e Presentazioni in wwwroot per conservare rispettivamente i file PowerPoint e le diapositive renderizzate.
Presentazione di PowerPoint in ASP.NET
  1. Crea una nuova cartella con il nome “Helpers” nella cartella principale.

  2. Crea una nuova classe con il nome “Slide” nella cartella “Helpers” per memorizzare le informazioni sulle diapositive della presentazione.

public class Slide
{
	public int SlideNumber { get; set; }
	public string Path { get; set; }
}
  1. Apri “HomeController.cs” e sostituisci il suo codice con il seguente (Aggiorna il nome del file PowerPoint predefinito nell’azione Indice).
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)
		{
			// Visualizza il file PowerPoint predefinito al caricamento della pagina
			slides = RenderPresentationAsImage("presentation.pptx");
		}
		else
		{
			slides = RenderPresentationAsImage(fileName);
		}

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

		string imagePath = "";
		// Salva e visualizza le diapositive della presentazione
		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);
			// Aggiungi alla lista
			slides.Add(new Helper.Slide { SlideNumber = j, Path = string.Format("slide_{0}.png", j) });
		}

		return slides;
	}
}
  1. Apri Views/Home/index.cshtml e sostituisci il suo contenuto con il seguente.
@{
    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. Crea l’applicazione ed eseguila nel tuo browser preferito.
Visualizzatore di PowerPoint in ASP.NET Core

Guarda anche

Ottieni una licenza temporanea per Aspose.Slides per .NET

Puoi ottenere la licenza temporanea di Aspose.Slides per .NET per evitare limitazioni di prova.

Suggerimento: potresti voler dare un’occhiata a un’implementazione live delle operazioni di visualizzazione per le presentazioni.