Cree un visor de documentos en ASP.NET Core MVC para más de 140 formatos de archivo

Los visores de documentos en línea se han vuelto populares después del creciente uso de documentos digitales, especialmente en los sistemas de administración de contenido. La razón detrás de esta popularidad es que puede ver una variedad de formatos de documentos sin comprar o instalar programas de software dedicados. Teniendo en cuenta la importancia de los visores de documentos, pensé en escribir un artículo sobre cómo crear un visor de documentos universal en ASP.NET MVC.

Vamos a crear una aplicación de visor de documentos ASP.NET MVC que tendrá como destino .NET Core marco. Para la representación de documentos en el backend, usaremos la API GroupDocs.Viewer for .NET, una potente API de visor de documentos que admite más de 140 tipos de documentos, incluidos PDF, Word, Excel, PowerPoint, Visio, CAD, Outlook y muchos otros formatos populares.

¿Por qué .NET Core?

.NET Core es una valiosa adición al ecosistema .NET de Microsoft. Hace posible desarrollar aplicaciones multiplataforma sin ningún esfuerzo adicional requerido por los desarrolladores. Esta es la razón por la que seleccioné .NET Core como el marco de destino.

Pasos para crear un visor de documentos en ASP.NET Core

1. Abra Visual Studio y comience un nuevo proyecto.

2. Seleccione .NET Core de los tipos de proyecto y ASP.NET Core Web Application de las plantillas.

3. Seleccione Aplicación web (Modelo-Vista-Controlador) y haga clic en el botón Aceptar.

4. Instale GroupDocs.Viewer desde NuGet.

5. Abra el archivo Views/Home/Index.cshtml y reemplace su contenido con lo siguiente:

@{
    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 y reemplace el contenido de la clase con el siguiente código.

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)))
		{
      //Obtener información del documento
			ViewInfo info = viewer.GetViewInfo(ViewInfoOptions.ForPngView(false));
			pageCount = info.Pages.Count;
      //Establecer opciones y 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. Agregue los siguientes estilos en el archivo 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. Cree la aplicación de visor de documentos y ejecútela en su navegador favorito.

Descargar Visor de documentos ASP.NET MVC

El código fuente del visor de documentos ASP.NET MVC es de código abierto y está disponible para descargar.