您是否正在寻找 PowerPoint Viewer 来在您的 ASP.NET Core Web 应用程序中查看或嵌入演示文稿？如果是，请继续阅读本文并了解如何使用 C# 创建简单的 ASP.NET Core PowerPoint Viewer 并显示 PPT/PPTX 演示文稿。所以让我们开始吧。
ASP.NET PowerPoint 查看器的功能
我们的 ASP.NET PowerPoint Viewer 将使用 Aspose.Slides for .NET API 将演示幻灯片呈现为 PNG 图像。渲染幻灯片后，我们将使用 Bootstrap Carousel 显示它们。以下将是该应用程序的功能：
- 浏览和查看 PowerPoint (PPT/PPTX) 演示文稿。
- 设置在页面加载时显示的默认 PowerPoint 文件。
- 在幻灯片之间导航的滑块。
在 ASP.NET Core 中创建 PowerPoint Viewer 的步骤
以下是在 ASP.NET Core 中创建 PowerPoint Viewer 的一些简单步骤。
- 在 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”并将其代码替换为以下代码（在索引操作中更新默认 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 的 临时许可证 以避免试用限制。
提示：您可能想查看 演示文稿查看操作的实时实现。