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:
- Sfoglia e visualizza le presentazioni PowerPoint (PPT/PPTX).
- Imposta il file PowerPoint predefinito da visualizzare al caricamento della pagina.
- 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.
- Creare una nuova applicazione Web ASP.NET Core in Visual Studio.
- Aprire Gestione pacchetti NuGet e installare il pacchetto Aspose.Slides for .NET.
- Crea cartelle Presentazioni e Presentazioni in wwwroot per conservare rispettivamente i file PowerPoint e le diapositive renderizzate.
Crea una nuova cartella con il nome “Helpers” nella cartella principale.
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; }
}
- 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;
}
}
- 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">×</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>
- Crea l’applicazione ed eseguila nel tuo browser preferito.
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.