إنشاء عارض المستندات في ASP.NET Core MVC لـ 140+ تنسيقات الملفات

أصبح مشاهدو المستندات عبر الإنترنت شائعًا بعد الاستخدام المتزايد للوثائق الرقمية ، خاصة في أنظمة إدارة المحتوى. السبب وراء هذه الشعبية هو أنه يمكنك عرض مجموعة متنوعة من تنسيقات المستندات دون شراء أو تثبيت برامج مخصصة. بالنظر إلى أهمية عارض المستندات ، فكرت في كتابة مقال حول كيفية إنشاء عارض مستندات عالمي في ASP.NET MVC.

سنقوم بإنشاء ASP.NET MVC تطبيق عارض المستندات الذي سيستهدف .NET Core. لعرض المستند في الخلفية ، سنستخدم GroupDocs.Viewer for .NET API - واجهة برمجة تطبيقات قوية لعارض المستندات تدعم أكثر من 140 نوعًا من المستندات بما في ذلك PDF و Word و Excel و PowerPoint و Visio و CAD و Outlook والعديد من التنسيقات الشائعة الأخرى.

لماذا NET Core؟

NET Core هو إضافة قيمة إلى نظام .NET البيئي بواسطة Microsoft. يجعل من الممكن تطوير تطبيقات عبر الأنظمة الأساسية دون أي جهود إضافية يطلبها المطورون. هذا هو السبب في أنني اخترت .NET Core ليكون إطار العمل المستهدف.

خطوات إنشاء عارض المستند في ASP.NET Core

1. افتح Visual Studio وابدأ مشروعًا جديدًا.

2. حدد .NET Core من أنواع المشروع و ASP.NET Core Web Application من القوالب.

3. حدد تطبيق الويب (Model-View-Controller) وانقر فوق الزر Ok.

4. تثبيت GroupDocs.Viewer من NuGet.

5. افتح ملف Views / Home / Index.cshtml واستبدل محتواه بما يلي:

@{
    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. افتح Controllers / HomeController.cs واستبدل محتوى الفصل بالكود التالي.

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)))
		{
      //الحصول على معلومات الوثيقة
			ViewInfo info = viewer.GetViewInfo(ViewInfoOptions.ForPngView(false));
			pageCount = info.Pages.Count;
      //تعيين الخيارات وتقديم المستند
			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. قم بإلحاق الأنماط التالية في ملف 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. قم ببناء تطبيق عارض المستندات وتشغيله في متصفحك المفضل.

قم بتنزيل عارض المستندات ASP.NET MVC

الكود المصدري لعارض مستندات ASP.NET MVC مفتوح المصدر ومتاح لـ تنزيل.