Mostrar PPT PPTX en ASP.NET Core

¿Está buscando un visor de PowerPoint para ver o incrustar presentaciones en su aplicación web ASP.NET Core? En caso afirmativo, continúe leyendo este artículo y aprenda cómo crear un visor de PowerPoint ASP.NET Core simple y mostrar presentaciones PPT/PPTX usando C#. Vamos a empezar.

Características del visor de PowerPoint ASP.NET

Nuestro visor de PowerPoint ASP.NET utilizará la API Aspose.Slides for .NET para representar las diapositivas de la presentación como imágenes PNG. Una vez que se rendericen las diapositivas, las mostraremos usando el Carrusel de Bootstrap. Serán características de la aplicación las siguientes:

  1. Explore y vea presentaciones de PowerPoint (PPT/PPTX).
  2. Configure el archivo de PowerPoint predeterminado para que se muestre al cargar la página.
  3. Control deslizante para navegar entre las diapositivas.

Pasos para crear un visor de PowerPoint en ASP.NET Core

Los siguientes son algunos pasos sencillos para crear un Visor de PowerPoint en ASP.NET Core.

  1. Cree una nueva aplicación web ASP.NET Core en Visual Studio.
Crear un visor de PowerPoint ASP.NET
  1. Abra NuGet Package Manager e instale el paquete Aspose.Slides for .NET.
Presentación de PowerPoint de ASP.NET
  1. Cree carpetas de Presentaciones y Diapositivas en wwwroot para guardar los archivos de PowerPoint y las diapositivas procesadas respectivamente.
Presentación de diapositivas de PowerPoint en ASP.NET
  1. Cree una nueva carpeta con el nombre “Ayudantes” en la carpeta raíz.

  2. Cree una nueva clase con el nombre “Diapositiva” en la carpeta “Ayudantes” para almacenar la información de las diapositivas de la presentación.

public class Slide
{
	public int SlideNumber { get; set; }
	public string Path { get; set; }
}
  1. Abra “HomeController.cs” y reemplace su código con lo siguiente (Actualice el nombre del archivo de PowerPoint predeterminado en la acción Índice).
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)
		{
			// Mostrar el archivo de PowerPoint predeterminado al cargar la página
			slides = RenderPresentationAsImage("presentation.pptx");
		}
		else
		{
			slides = RenderPresentationAsImage(fileName);
		}

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

		string imagePath = "";
		// Guardar y ver diapositivas de presentación
		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);
			// Añadir a la lista
			slides.Add(new Helper.Slide { SlideNumber = j, Path = string.Format("slide_{0}.png", j) });
		}

		return slides;
	}
}
  1. Abra Views/Home/index.cshtml y reemplace su contenido con lo siguiente.
@{
    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. Cree la aplicación y ejecútela en su navegador favorito.
Visor de PowerPoint en ASP.NET Core

Ver también

Obtenga una licencia temporal para Aspose.Slides for .NET

Puede obtener la licencia temporal de Aspose.Slides for .NET para evitar limitaciones de prueba.

Sugerencia: es posible que desee consultar una implementación en vivo de operaciones de visualización para presentaciones.