Criar visualizador de documentos no ASP.NET Core MVC para mais de 140 formatos de arquivo

Os visualizadores de documentos online tornaram-se populares após o crescente uso de documentos digitais, especialmente nos sistemas de gerenciamento de conteúdo. A razão por trás dessa popularidade é que você pode visualizar uma variedade de formatos de documentos sem comprar ou instalar programas de software dedicados. Considerando a importância dos visualizadores de documentos, pensei em escrever um artigo sobre como criar um visualizador de documentos universal em ASP.NET MVC.

Vamos criar um aplicativo visualizador de documentos ASP.NET MVC que terá como alvo o .NET Core. Para a renderização do documento no back-end, usaremos a API GroupDocs.Viewer for .NET - uma API de visualizador de documentos poderosa que suporta mais de 140 tipos de documentos, incluindo PDF, Word, Excel, PowerPoint, Visio, CAD, Outlook e muitos outros formatos populares.

Por que .NET Core?

O .NET Core é uma adição valiosa ao ecossistema .NET da Microsoft. Torna possível desenvolver aplicativos multiplataforma sem nenhum esforço adicional exigido pelos desenvolvedores. É por isso que selecionei o .NET Core para ser a estrutura de destino.

Etapas para criar o visualizador de documentos no ASP.NET Core

1. Abra o Visual Studio e inicie um novo projeto.

2. Selecione .NET Core nos tipos de projeto e ASP.NET Core Web Application nos modelos.

3. Selecione Aplicativo da Web (Model-View-Controller) e clique no botão Ok.

4. Instale o GroupDocs.Viewer do NuGet.

5. Abra o arquivo Views/Home/Index.cshtml e substitua seu conteúdo pelo seguinte:

@{
    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. Abra Controllers/HomeController.cs e substitua o conteúdo da classe pelo código a seguir.

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)))
		{
      //Obter informações do documento
			ViewInfo info = viewer.GetViewInfo(ViewInfoOptions.ForPngView(false));
			pageCount = info.Pages.Count;
      //Definir opções e renderizar documento
			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. Anexe os estilos a seguir no arquivo 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. Crie o aplicativo visualizador de documentos e execute em seu navegador favorito.

Baixe o Visualizador de Documentos ASP.NET MVC

O código-fonte do visualizador de documentos ASP.NET MVC é de código aberto e está disponível para download.