您是否正在尋找 PowerPoint 查看器來查看演示文稿或將演示文稿嵌入到您的 ASP.NET Core Web 應用程序中?如果是,請繼續閱讀本文並了解如何使用 C# 創建一個簡單的 ASP.NET Core PowerPoint 查看器並顯示 PPT/PPTX 演示文稿。讓我們開始吧。
ASP.NET PowerPoint 查看器的功能
我們的 ASP.NET PowerPoint 查看器將使用 Aspose.Slides for .NET API 將演示文稿幻燈片呈現為 PNG 圖像。呈現幻燈片後,我們將使用 Bootstrap Carousel 顯示它們。以下將是該應用程序的功能:
- 瀏覽和查看 PowerPoint (PPT/PPTX) 演示文稿。
- 設置在頁面加載時顯示的默認 PowerPoint 文件。
- 在幻燈片之間導航的滑塊。
在 ASP.NET Core 中創建 PowerPoint 查看器的步驟
以下是在 ASP.NET Core 中創建 PowerPoint 查看器的一些簡單步驟。
- 在 Visual Studio 中創建一個新的 ASP.NET Core Web 應用程序。
- 打開 NuGet 包管理器並安裝 Aspose.Slides for .NET 包。
- 在 wwwroot 中創建 Presentations 和 Slides 文件夾,分別保存 PowerPoint 文件和渲染的幻燈片。
在根文件夾中創建一個名為“Helpers”的新文件夾。
在“Helpers”文件夾中創建一個名為“Slide”的新類來存儲演示幻燈片的信息。
public class Slide
{
public int SlideNumber { get; set; }
public string Path { get; set; }
}
- 打開“HomeController.cs”並將其代碼替換為以下代碼(在 Index 操作中更新默認 PowerPoint 文件的名稱)。
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)
{
// 在頁面加載時顯示默認的 PowerPoint 文件
slides = RenderPresentationAsImage("presentation.pptx");
}
else
{
slides = RenderPresentationAsImage(fileName);
}
return View(slides);
}
public List<Helper.Slide> RenderPresentationAsImage(string FileName)
{
var webRoot = _env.WebRootPath;
// 加載 PowerPoint 演示文稿
Presentation presentation = new Presentation(Path.Combine(webRoot, "Presentations", FileName));
var slides = new List<Helper.Slide>();
string imagePath = "";
// 保存和查看演示幻燈片
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);
// 添加到列表
slides.Add(new Helper.Slide { SlideNumber = j, Path = string.Format("slide_{0}.png", j) });
}
return slides;
}
}
- 打開 Views/Home/index.cshtml 並將其內容替換為以下內容。
@{
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>
- 構建應用程序並在您喜歡的瀏覽器中運行它。
也可以看看
獲得 Aspose.Slides for .NET 的臨時許可證
您可以獲得 Aspose.Slides for .NET 的臨時許可,以避免試用限制。
提示:您可能想要查看 演示文稿查看操作的實時實現。