Vous recherchez une visionneuse PowerPoint pour afficher ou intégrer des présentations dans votre application Web ASP.NET Core ? Si oui, continuez à lire cet article et découvrez comment créer une simple visionneuse PowerPoint ASP.NET Core et afficher des présentations PPT/PPTX à l’aide de C#. Alors commençons.
Fonctionnalités de la visionneuse PowerPoint ASP.NET
Notre visionneuse PowerPoint ASP.NET utilisera l’API Aspose.Slides for .NET pour rendre les diapositives de la présentation sous forme d’images PNG. Une fois les diapositives rendues, nous les afficherons à l’aide du carrousel Bootstrap. Voici les fonctionnalités de l’application :
- Parcourir et afficher des présentations PowerPoint (PPT/PPTX).
- Définissez le fichier PowerPoint par défaut à afficher lors du chargement de la page.
- Curseur pour naviguer entre les diapositives.
Étapes pour créer une visionneuse PowerPoint dans ASP.NET Core
Voici quelques étapes simples pour créer une visionneuse PowerPoint dans ASP.NET Core.
- Créez une nouvelle application Web ASP.NET Core dans Visual Studio.
- Ouvrez le gestionnaire de packages NuGet et installez le package Aspose.Slides for .NET.
- Créez des dossiers Présentations et Diapositives dans wwwroot pour conserver respectivement les fichiers PowerPoint et les diapositives rendues.
Créez un nouveau dossier avec le nom “Helpers” dans le dossier racine.
Créez une nouvelle classe avec le nom “Slide” dans le dossier “Helpers” pour stocker les informations des diapositives de la présentation.
public class Slide
{
public int SlideNumber { get; set; }
public string Path { get; set; }
}
- Ouvrez le “HomeController.cs” et remplacez son code par ce qui suit (Mettre à jour le nom du fichier PowerPoint par défaut dans l’action Index).
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)
{
// Afficher le fichier PowerPoint par défaut au chargement de la page
slides = RenderPresentationAsImage("presentation.pptx");
}
else
{
slides = RenderPresentationAsImage(fileName);
}
return View(slides);
}
public List<Helper.Slide> RenderPresentationAsImage(string FileName)
{
var webRoot = _env.WebRootPath;
// Charger la présentation PowerPoint
Presentation presentation = new Presentation(Path.Combine(webRoot, "Presentations", FileName));
var slides = new List<Helper.Slide>();
string imagePath = "";
// Enregistrer et afficher les diapositives de présentation
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);
// Ajouter à la liste
slides.Add(new Helper.Slide { SlideNumber = j, Path = string.Format("slide_{0}.png", j) });
}
return slides;
}
}
- Ouvrez Views/Home/index.cshtml et remplacez son contenu par ce qui suit.
@{
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>
- Créez l’application et exécutez-la dans votre navigateur préféré.
Voir également
Obtenez une licence temporaire pour Aspose.Slides for .NET
Vous pouvez obtenir la licence temporaire d’Aspose.Slides for .NET pour éviter les limitations d’essai.
Conseil : Vous pouvez consulter une mise en œuvre en direct des opérations d’affichage pour les présentations.