Crea un visualizzatore di documenti in ASP.NET Core MVC per oltre 140 formati di file

I visualizzatori di documenti online sono diventati popolari dopo il crescente utilizzo dei documenti digitali, in particolare nei sistemi di gestione dei contenuti. Il motivo alla base di questa popolarità è che puoi visualizzare una varietà di formati di documenti senza acquistare o installare programmi software dedicati. Considerando l’importanza dei visualizzatori di documenti, ho pensato di scrivere un articolo su come creare un visualizzatore di documenti universale in ASP.NET MVC.

Creeremo un ASP.NET MVC applicazione visualizzatore di documenti destinata a .NET Core. Per il rendering dei documenti sul back-end, utilizzeremo l’API GroupDocs.Viewer for .NET, una potente API visualizzatore di documenti che supporta oltre 140 tipi di documenti inclusi PDF, Word, Excel, PowerPoint, Visio, CAD, Outlook e molti altri formati popolari.

Perché .NET Core?

.NET Core è una preziosa aggiunta all’ecosistema .NET di Microsoft. Consente di sviluppare applicazioni multipiattaforma senza ulteriori sforzi richiesti dagli sviluppatori. Questo è il motivo per cui ho selezionato .NET Core come framework mirato.

Passaggi per creare un visualizzatore di documenti in ASP.NET Core

1. Apri Visual Studio e avvia un nuovo progetto.

2. Selezionare .NET Core dai tipi di progetto e Applicazione Web ASP.NET Core dai modelli.

3. Selezionare Applicazione Web (Model-View-Controller) e fare clic sul pulsante Ok.

4. Installa GroupDocs.Viewer da NuGet.

5. Apri il file Views/Home/Index.cshtml e sostituisci il suo contenuto con il seguente:

@{
    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. Apri Controllers/HomeController.cs e sostituisci il contenuto della classe con il codice seguente.

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)))
		{
      //Ottieni informazioni sul documento
			ViewInfo info = viewer.GetViewInfo(ViewInfoOptions.ForPngView(false));
			pageCount = info.Pages.Count;
      //Imposta le opzioni e visualizza il 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. Aggiungi i seguenti stili nel file 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. Crea l’applicazione di visualizzazione documenti ed eseguila nel tuo browser preferito.

Scarica il visualizzatore di documenti ASP.NET MVC

Il codice sorgente del visualizzatore di documenti ASP.NET MVC è open source e disponibile per download.