¿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:
- Explore y vea presentaciones de PowerPoint (PPT/PPTX).
- Configure el archivo de PowerPoint predeterminado para que se muestre al cargar la página.
- 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.
- Cree una nueva aplicación web ASP.NET Core en Visual Studio.
- Abra NuGet Package Manager e instale el paquete Aspose.Slides for .NET.
- Cree carpetas de Presentaciones y Diapositivas en wwwroot para guardar los archivos de PowerPoint y las diapositivas procesadas respectivamente.
Cree una nueva carpeta con el nombre “Ayudantes” en la carpeta raíz.
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; }
}
- 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;
}
}
- 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">×</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>
- Cree la aplicación y ejecútela en su navegador favorito.
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.