Vytvořte prohlížeč dokumentů v ASP.NET Core MVC pro více než 140 formátů souborů

Online prohlížeče dokumentů se staly populární po rostoucím používání digitálních dokumentů, zejména v systémech pro správu obsahu. Důvodem této popularity je, že si můžete prohlížet různé formáty dokumentů bez nákupu nebo instalace speciálních softwarových programů. Vzhledem k důležitosti prohlížečů dokumentů mě napadlo napsat článek o tom, jak vytvořit univerzální prohlížeč dokumentů v ASP.NET MVC.

Chystáme se vytvořit aplikaci pro prohlížení dokumentů ASP.NET MVC, která bude cílit na framework .NET Core. Pro vykreslování dokumentů na backendu použijeme GroupDocs.Viewer for .NET API – výkonné rozhraní API pro prohlížení dokumentů, které podporuje více než 140 typů dokumentů včetně PDF, Word, Excel, PowerPoint, Visio, CAD, Outlook a mnoho dalších populárních formátů.

Proč .NET Core?

.NET Core je cenným přírůstkem do ekosystému .NET od společnosti Microsoft. Umožňuje vyvíjet multiplatformní aplikace bez jakéhokoli dalšího úsilí ze strany vývojářů. To je důvod, proč jsem vybral .NET Core jako cílový rámec.

Kroky k vytvoření prohlížeče dokumentů v ASP.NET Core

1. Otevřete Visual Studio a spusťte nový projekt.

2. Vyberte .NET Core z typů projektů a ASP.NET Core Web Application ze šablon.

3. Vyberte Web Application (Model-View-Controller) a klikněte na tlačítko OK.

4. Nainstalujte GroupDocs.Viewer z NuGet.

5. Otevřete soubor Views/Home/Index.cshtml a nahraďte jeho obsah následujícím:

@{
    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. Otevřete Controllers/HomeController.cs a nahraďte obsah třídy následujícím kódem.

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)))
		{
      //Získejte informace o dokumentu
			ViewInfo info = viewer.GetViewInfo(ViewInfoOptions.ForPngView(false));
			pageCount = info.Pages.Count;
      //Nastavte možnosti a vykreslete dokument
			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. Připojte následující styly do souboru 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. Sestavte aplikaci prohlížeče dokumentů a spusťte ji ve svém oblíbeném prohlížeči.

Stáhněte si prohlížeč dokumentů ASP.NET MVC

Zdrojový kód prohlížeče dokumentů ASP.NET MVC je open source a je k dispozici pro stáhnout.