140개 이상의 문서 형식을 위한 ASP.NET Core MVC의 문서 뷰어

온라인 문서 뷰어 애플리케이션은 특히 콘텐츠 관리 시스템에서 디지털 문서의 사용이 증가한 후 대중화되었습니다. 이러한 인기의 이유는 전용 소프트웨어 프로그램을 구입하거나 설치하지 않고도 다양한 문서 형식을 볼 수 있기 때문입니다. 문서 뷰어의 중요성을 고려하여 범용 문서 뷰어 응용 프로그램을 만드는 방법에 대한 기사를 작성하려고 생각했습니다.

이 문서 뷰어는 ASP.NET Core MVC 애플리케이션이며 .NET Core 프레임워크를 대상으로 합니다. 백엔드에서 문서 렌더링을 위해 GroupDocs.Viewer for .NET API – PDF, Word, Excel, PowerPoint, Visio, CAD, Outlook 및 기타 널리 사용되는 형식을 포함하여 140개 이상의 문서 유형을 지원하는 강력한 file viewer API를 사용합니다.

왜 .NET Core인가?

.NET Core는 Microsoft의 .NET 에코시스템에 추가된 귀중한 기능입니다. 개발자의 추가 노력 없이 크로스 플랫폼 애플리케이션을 개발할 수 있습니다. 이것이 내가 대상 프레임워크로 .NET Core를 선택한 이유입니다.

ASP.NET Core에서 문서 뷰어를 만드는 단계

1. Visual Studio에서 새 프로젝트를 만듭니다.

2. 프로젝트 유형에서 .NET Core를 선택하고 템플릿에서 ASP.NET Core 웹 애플리케이션을 선택합니다.


3. 웹 애플리케이션(Model-View-Controller)을 선택하고 확인 버튼을 클릭합니다.


4. NuGet에서 GroupDocs.Viewer를 설치합니다.


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)))
        {
      //Get document info
            ViewInfo info = viewer.GetViewInfo(ViewInfoOptions.ForPngView(false));
            pageCount = info.Pages.Count;
      //Set options and render document
            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. 애플리케이션을 빌드하고 원하는 브라우저에서 실행합니다.

다운로드

애플리케이션의 전체 소스 코드는 다운로드 섹션에서 사용할 수 있습니다here.

건배!

또한보십시오

Create and Edit PowerPoint Files in ASP.NET

Create SmartArt in PowerPoint Presentations using C#

Convert PowerPoint Presentations to SVG in Java