Buat Penampil Dokumen di ASP.NET Core MVC untuk 140+ Format File

Pemirsa dokumen online menjadi populer setelah meningkatnya penggunaan dokumen digital, terutama dalam sistem pengelolaan konten. Alasan di balik popularitas ini adalah Anda dapat melihat berbagai format dokumen tanpa membeli atau menginstal program perangkat lunak khusus. Mempertimbangkan pentingnya penampil dokumen, saya berpikir untuk menulis artikel tentang cara membuat penampil dokumen universal di ASP.NET MVC.

Kita akan membuat aplikasi penampil dokumen ASP.NET MVC yang akan menargetkan [.NET Core](https://en.wikipedia. org/wiki/.NETCore) kerangka kerja. Untuk perenderan dokumen di backend, kami akan menggunakan GroupDocs.Viewer for .NET API - API penampil dokumen andal yang mendukung lebih dari 140 jenis dokumen termasuk PDF , Word, Excel, PowerPoint, Visio, CAD, Outlook, dan banyak format populer lainnya.

Mengapa .NET Inti?

.NET Core adalah tambahan berharga untuk ekosistem .NET oleh Microsoft. Itu memungkinkan untuk mengembangkan aplikasi lintas platform tanpa upaya tambahan yang diperlukan oleh pengembang. Inilah mengapa saya memilih .NET Core sebagai kerangka kerja yang ditargetkan.

Langkah-langkah Membuat Document Viewer di ASP.NET Core

1. Buka Visual Studio dan mulai proyek baru.

2. Pilih .NET Core dari jenis proyek dan ASP.NET Core Web Application dari templat.

3. Pilih Aplikasi Web (Model-View-Controller) dan klik tombol Ok.

4. Instal GroupDocs.Viewer dari NuGet.

5. Buka file Views/Home/Index.cshtml dan ganti isinya dengan yang berikut:

@{
    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. Buka Controllers/HomeController.cs dan ganti konten kelas dengan kode berikut.

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)))
		{
      //Dapatkan info dokumen
			ViewInfo info = viewer.GetViewInfo(ViewInfoOptions.ForPngView(false));
			pageCount = info.Pages.Count;
      //Tetapkan opsi dan render dokumen
			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. Tambahkan gaya berikut di 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. Bangun aplikasi penampil dokumen dan jalankan di browser favorit Anda.

Unduh Penampil Dokumen ASP.NET MVC

Kode sumber penampil dokumen ASP.NET MVC adalah sumber terbuka dan tersedia untuk unduh.