Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ASP.NET Core MVC Document Viewer
@{
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>
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 });
}
}
.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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.