Die Online-Dokumentenbetrachter sind nach der zunehmenden Verwendung digitaler Dokumente, insbesondere in den Content-Management-Systemen, populär geworden. Der Grund für diese Beliebtheit ist, dass Sie eine Vielzahl von Dokumentformaten anzeigen können, ohne spezielle Softwareprogramme kaufen oder installieren zu müssen. In Anbetracht der Bedeutung von Dokumentbetrachtern dachte ich daran, einen Artikel darüber zu schreiben, wie man einen universellen Dokumentbetrachter in ASP.NET MVC erstellt.

Wir werden eine ASP.NET MVC Document Viewer-Anwendung erstellen, die auf .NET Core Framework. Für das Rendern von Dokumenten im Back-End verwenden wir die API GroupDocs.Viewer for .NET – eine leistungsstarke Dokument-Viewer-API die über 140 Dokumenttypen unterstützt, darunter PDF, Word, Excel, PowerPoint, Visio, CAD, Outlook und viele andere beliebte Formate.

Warum .NET Core?

.NET Core ist eine wertvolle Ergänzung des .NET-Ökosystems von Microsoft. Es ermöglicht die Entwicklung plattformübergreifender Anwendungen ohne zusätzlichen Aufwand für die Entwickler. Aus diesem Grund habe ich .NET Core als Zielframework ausgewählt.

Schritte zum Erstellen von Document Viewer in ASP.NET Core

1. Öffnen Sie Visual Studio und starten Sie ein neues Projekt.

2. Wählen Sie .NET Core aus den Projekttypen und ASP.NET Core-Webanwendung aus den Vorlagen aus.

3. Wählen Sie Webanwendung (Model-View-Controller) und klicken Sie auf die Schaltfläche OK.

4. Installieren Sie GroupDocs.Viewer von NuGet.

5. Öffnen Sie die Datei Views/Home/Index.cshtml und ersetzen Sie deren Inhalt durch Folgendes:

@{
    ViewData["Title"] = "Home Page";
}
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script>
    function ViewDocument(file) {
        $("#loader").fadeIn();
        var data = { FileName: file };
        $.ajax({
            type: "POST",
            url: '/Home/OnPost',
            data: data,
            dataType: "text"
        }).done(function (data) {
            var folderName = file.replace(".", "_");
            $("#content").empty();
            for (var i = 1; i <= data; i++) {
                $("#content").append("<img src='Content/" + folderName + "/page-" + i + ".png'/>");
            }
            $("#loader").fadeOut();
        })
    }
</script>
<script type="text/javascript">
    $(window).load(function () {
        $("#loader").fadeOut(1000);
    });
</script>
<div class="row">
    <div class="col-md-3">
        <div class="sidenav">
            <div id="loader"></div>
            <h2 style="padding-left:15px">Files</h2>
            @if (ViewBag.lstFiles != null)
            {
                @foreach (string file in ViewBag.lstFiles)
                {
                    <a href="#" onclick="ViewDocument('@file')">@file</a>
                }
            }
        </div>
    </div>
    <div class="col-md-9">
        <h2>Preview</h2>
        <div id="content"></div>
    </div>
</div>

6. Öffnen Sie Controllers/HomeController.cs und ersetzen Sie den Inhalt der Klasse durch den folgenden Code.

public class HomeController : Controller
{
	private readonly IHostingEnvironment _hostingEnvironment;
	private string projectRootPath;
	private string outputPath;
	private string storagePath;
	List<string> lstFiles; 

	public HomeController(IHostingEnvironment hostingEnvironment)
	{
		_hostingEnvironment = hostingEnvironment;
		projectRootPath = _hostingEnvironment.ContentRootPath;
		outputPath = Path.Combine(projectRootPath, "wwwroot/Content");
		storagePath = Path.Combine(projectRootPath, "storage");
		lstFiles = new List<string>(); 
	}

	public IActionResult Index()
	{
		var files = Directory.GetFiles(storagePath);
		foreach (var file in files)
		{
			lstFiles.Add(Path.GetFileName(file));
		}
		ViewBag.lstFiles = lstFiles; 
		return View();
	}
	[HttpPost]
	public IActionResult OnPost(string FileName)
	{
		int pageCount = 0;
		string imageFilesFolder = Path.Combine(outputPath, Path.GetFileName(FileName).Replace(".", "_"));
		if (!Directory.Exists(imageFilesFolder))
		{
			Directory.CreateDirectory(imageFilesFolder);
		}
		string imageFilesPath = Path.Combine(imageFilesFolder, "page-{0}.png");
		using (Viewer viewer = new Viewer(Path.Combine(storagePath, FileName)))
		{
      //Dokumentinformationen erhalten
			ViewInfo info = viewer.GetViewInfo(ViewInfoOptions.ForPngView(false));
			pageCount = info.Pages.Count;
      //Optionen festlegen und Dokument rendern
			PngViewOptions options = new PngViewOptions(imageFilesPath);
			viewer.View(options);
		} 
		return new JsonResult(pageCount);
	} 

	[ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
	public IActionResult Error()
	{
		return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
	}
}

7. Fügen Sie die folgenden Stile in die Datei wwwroot/css/site.css ein.

.sidenav {
    width: 300px;
    position: fixed;
    z-index: 1;
    left: 0px;
    background: #eee;
    overflow-x: hidden;
    padding: 8px 0;
}
.sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 15px;
    color: #2196F3;
    display: block;
}
.sidenav a:hover {
        color: #064579;
    }
.main {
    margin-left: 140px; /* Same width as the sidebar + left position in px */
    font-size: 15px; /* Increased text to enable scrolling */
    padding: 0px 10px;
}
@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }
        .sidenav a {
            font-size: 20px;
        }
}
#loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('../../images/Loading.gif') 50% 50% no-repeat rgb(249,249,249);
}

8. Erstellen Sie die Document Viewer-Anwendung und führen Sie sie in Ihrem bevorzugten Browser aus.

ASP.NET Core-Dateibetrachter

Laden Sie ASP.NET MVC Document Viewer herunter

Der Quellcode des ASP.NET MVC Document Viewer ist Open Source und steht zum [Download] zur Verfügung (https://github.com/usmanazizgroupdocs/ASP.NET-Core-MVC-Document-Viewer/archive/master.zip).