สร้างโปรแกรมดูเอกสารใน ASP.NET Core MVC สำหรับรูปแบบไฟล์มากกว่า 140 รูปแบบ

โปรแกรมดูเอกสารออนไลน์ได้รับความนิยมหลังจากการใช้งานเอกสารดิจิทัลเพิ่มขึ้น โดยเฉพาะในระบบจัดการเนื้อหา เหตุผลที่อยู่เบื้องหลังความนิยมนี้คือคุณสามารถดูรูปแบบเอกสารต่างๆ ได้โดยไม่ต้องซื้อหรือติดตั้งโปรแกรมซอฟต์แวร์เฉพาะ เมื่อพิจารณาถึงความสำคัญของโปรแกรมดูเอกสาร ฉันคิดว่าจะเขียนบทความเกี่ยวกับวิธีสร้างโปรแกรมดูเอกสารสากลใน ASP.NET MVC

เรากำลังจะสร้างแอปพลิเคชันดูเอกสาร ASP.NET MVC ซึ่งจะกำหนดเป้าหมายไปที่ [.NET Core](https://en.wikipedia. org/wiki/.NETCore) เฟรมเวิร์ก สำหรับการแสดงผลเอกสารที่แบ็กเอนด์ เราจะใช้ API ของ 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. เลือก 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

ซอร์สโค้ดของโปรแกรมดูเอกสาร ASP.NET MVC เป็นโอเพ่นซอร์สและพร้อมใช้งานสำหรับดาวน์โหลด