ASP.NET Core Webアプリケーションでプレゼンテーションを表示または埋め込むためのPowerPointビューアをお探しですか？はいの場合は、この記事を読み続けて、単純なASP.NET Core PowerPointビューアーを作成し、C#を使用してPPT/PPTXプレゼンテーションを表示する方法を学習してください。それでは始めましょう。
ASP.NETPowerPointViewerの機能
ASP.NET PowerPoint Viewerは、Aspose.Slides for .NET APIを使用して、プレゼンテーションスライドをPNG画像としてレンダリングします。スライドがレンダリングされたら、ブートストラップカルーセルを使用してスライドを表示します。アプリケーションの機能は次のとおりです。
- PowerPoint(PPT / PPTX)プレゼンテーションを参照および表示します。
- ページの読み込み時に表示されるデフォルトのPowerPointファイルを設定します。
- スライド間を移動するためのスライダー。
ASP.NETCoreでPowerPointViewerを作成する手順
以下は、ASP.NETCoreでPowerPointViewerを作成するための簡単な手順です。
1.VisualStudioで新しいASP.NET Core Webアプリケーションを作成します。
- NuGetパッケージマネージャーを開き、Aspose.Slides for .NETパッケージをインストールします。
- wwwrootにプレゼンテーションフォルダとスライドフォルダを作成して、PowerPointファイルとレンダリングされたスライドをそれぞれ保持します。
4.ルートフォルダに「Helpers」という名前の新しいフォルダを作成します。
5.「Helpers」フォルダに「Slide」という名前の新しいクラスを作成して、プレゼンテーションスライドの情報を保存します。
public class Slide
{
public int SlideNumber { get; set; }
public string Path { get; set; }
}
6.「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>
8.アプリケーションをビルドし、お気に入りのブラウザーで実行します。
関連項目
Aspose.Slides for .NETの一時ライセンスを取得します
試用版の制限を回避するために、Aspose.Slides for .NETの一時ライセンスを取得できます。
ヒント：プレゼンテーションの表示操作のライブ実装を確認することをお勧めします。