ایجاد Document Viewer در ASP.NET Core MVC برای بیش از 140 فرمت فایل

بینندگان اسناد آنلاین پس از افزایش استفاده از اسناد دیجیتال، به ویژه در سیستم های مدیریت محتوا، محبوب شده اند. دلیل این محبوبیت این است که شما می توانید انواع فرمت های اسناد را بدون خرید یا نصب برنامه های نرم افزاری اختصاصی مشاهده کنید. با توجه به اهمیت نمایشگر اسناد، فکر کردم مقاله ای در مورد نحوه ایجاد یک نمایشگر سند جهانی در ASP.NET MVC بنویسم.

ما قصد داریم یک برنامه نمایش اسناد ASP.NET MVC ایجاد کنیم که چارچوب .NET Core را هدف قرار دهد. برای ارائه سند در باطن، از GroupDocs.Viewer for .NET API استفاده می کنیم - یک API نمایشگر اسناد قدرتمند که از بیش از 140 نوع سند از جمله PDF، Word، Excel، PowerPoint، Visio، CAD، Outlook پشتیبانی می کند. ، و بسیاری از فرمت های محبوب دیگر.

چرا NET Core؟

.NET Core افزودنی ارزشمند به اکوسیستم .NET توسط مایکروسافت است. این امکان را فراهم می کند تا برنامه های کاربردی بین پلتفرمی را بدون هیچ تلاش اضافی مورد نیاز توسعه دهندگان توسعه دهید. به همین دلیل است که من .NET Core را به عنوان چارچوب هدف انتخاب کرده ام.

مراحل ایجاد Document Viewer در ASP.NET Core

1. ویژوال استودیو را باز کنید و یک پروژه جدید را شروع کنید.

2. NET Core را از انواع پروژه ها و ASP.NET Core Web Application را از قالب ها انتخاب کنید.

3. Web Application (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 Document Viewer را دانلود کنید

کد منبع نمایشگر اسناد ASP.NET MVC منبع باز است و برای دانلود در دسترس است.