Maak een documentviewer in ASP.NET Core MVC voor meer dan 140 bestandsindelingen

De online documentviewers zijn populair geworden na het groeiende gebruik van digitale documenten, vooral in de contentmanagementsystemen. De reden achter deze populariteit is dat u verschillende documentformaten kunt bekijken zonder speciale softwareprogramma’s te kopen of te installeren. Gezien het belang van documentviewers, dacht ik een artikel te schrijven over het maken van een universele documentviewer in ASP.NET MVC.

We gaan een ASP.NET MVC documentviewer-applicatie maken die gericht is op het .NET Core-framework. Voor de documentweergave aan de backend gebruiken we GroupDocs.Viewer for .NET API - een krachtige documentviewer-API die meer dan 140 documenttypen ondersteunt, waaronder PDF, Word, Excel, PowerPoint, Visio, CAD, Outlook , en vele andere populaire formaten.

Waarom .NET Core?

.NET Core is een waardevolle toevoeging aan het .NET-ecosysteem van Microsoft. Het maakt het mogelijk om platformonafhankelijke applicaties te ontwikkelen zonder extra inspanningen van de ontwikkelaars. Daarom heb ik .NET Core gekozen als het beoogde framework.

Stappen om documentviewer te maken in ASP.NET Core

1. Open Visual Studio en start een nieuw project.

2. Selecteer .NET Core uit de projecttypen en ASP.NET Core Web Application uit sjablonen.

3. Selecteer Web Application (Model-View-Controller) en klik op de knop Ok.

4. Installeer GroupDocs.Viewer van NuGet.

5. Open het bestand Views/Home/Index.cshtml en vervang de inhoud door het volgende:

@{
    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. Open Controllers/HomeController.cs en vervang de inhoud van de klasse door de volgende 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)))
		{
      //Documentinformatie ophalen
			ViewInfo info = viewer.GetViewInfo(ViewInfoOptions.ForPngView(false));
			pageCount = info.Pages.Count;
      //Stel opties in en render document
			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. Voeg de volgende stijlen toe aan het bestand wwwroot/css/site.css.

.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. Bouw de documentviewer-applicatie en voer deze uit in uw favoriete browser.

ASP.NET MVC-documentviewer downloaden

De broncode van de ASP.NET MVC-documentviewer is open source en beschikbaar voor download.