Les visualiseurs de documents en ligne sont devenus populaires après l’utilisation croissante des documents numériques, en particulier dans les systèmes de gestion de contenu. La raison de cette popularité est que vous pouvez afficher une variété de formats de documents sans acheter ni installer de logiciels dédiés. Compte tenu de l’importance des visionneuses de documents, j’ai pensé écrire un article sur la façon de créer une visionneuse de documents universelle dans ASP.NET MVC.

Nous allons créer une application de visualisation de documents ASP.NET MVC qui ciblera .NET Core. Pour le rendu du document au niveau du backend, nous utiliserons l’API GroupDocs.Viewer for .NET - une puissante API de visualiseur de documents qui prend en charge plus de 140 types de documents, dont PDF, Word, Excel, PowerPoint, Visio, CAD, Outlook et de nombreux autres formats populaires.

Pourquoi .NET Core ?

.NET Core est un ajout précieux à l’écosystème .NET de Microsoft. Il permet de développer des applications multiplateformes sans aucun effort supplémentaire requis par les développeurs. C’est pourquoi j’ai sélectionné .NET Core comme framework ciblé.

Étapes pour créer une visionneuse de documents dans ASP.NET Core

1. Ouvrez Visual Studio et démarrez un nouveau projet.

2. Sélectionnez .NET Core dans les types de projets et Application Web ASP.NET Core dans les modèles.

3. Sélectionnez Application Web (Modèle-Vue-Contrôleur) et cliquez sur le bouton OK.

4. Installez GroupDocs.Viewer à partir de NuGet.

5. Ouvrez le fichier Views/Home/Index.cshtml et remplacez son contenu par ce qui suit :

@{
    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. Ouvrez Controllers/HomeController.cs et remplacez le contenu de la classe par le code suivant.

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)))
		{
      //Obtenir des informations sur les documents
			ViewInfo info = viewer.GetViewInfo(ViewInfoOptions.ForPngView(false));
			pageCount = info.Pages.Count;
      //Définir les options et rendre le 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. Ajoutez les styles suivants dans le fichier 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. Créez l’application de visionneuse de documents et exécutez-la dans votre navigateur préféré.

Visionneuse de fichiers ASP.NET Core

Télécharger la visionneuse de documents ASP.NET MVC

Le code source de la visionneuse de documents ASP.NET MVC est open source et disponible pour téléchargement.