2X faster development
The ultimate ASP.NET MVC UI toolkit to boost your development speed.
DescriptionThis knowledge base explains how to generate and display excel files in thumbnail view. SolutionWe have generated the thumbnail image from excel file by using XlsIO ‘ConvertToImage()’ worksheet method. Please refer this help documentation for more information.
In the below example, we have created 2 views – one for list out the excel files in thumbnail view and another for viewing the excel file in MVC Spreadsheet while clicking the thumbnail.
VIEW (index.cshtml) <style> table ul li { float: left; margin-right: 30px; padding: 5px; border: 3px solid transparent; } table ul li:hover { border-color: #c8e277; } table a:hover { text-decoration: none; } </style> <h3>Server File Directory:</h3> <table cellpadding="10"> <tr> <td> Select file to open: </td> <tr> <tr> <td> <ul style="list-style: none;margin: 0; padding: 0;"> @foreach (var file in (List<string>)@ViewBag.Filenames) { var thumbnailImg = "/ExcelFiles/Thumbnails/" + Path.GetFileNameWithoutExtension(file) + ".png"; <li> <a href='@Url.Action("ExcelView", "Home", new { fileName = file })'> <div style="width:200px; height: 100px; overflow: hidden;"> <img src=@thumbnailImg /> </div> <br /> @file </a> </li> } </ul> </td> </tr> </table>
VIEW (ExcelView.cshtml) <h4>View excel(@ViewBag.fileName) in Spreadsheet</h4> <div class="control" style="height: 600px;"> @(Html.EJ().Spreadsheet<object>("Spreadsheet") .ShowRibbon(false) .AllowFormulaBar(false) .ImportSettings(import => import.ImportMapper("Import").ImportUrl((string)ViewBag.fileName) ) ) </div>
CONTROLLER public ActionResult Index() { ViewBag.Filenames = GetFilenames(); RefreshThumbnail(); return View(); } public ActionResult ExcelView(string fileName) { ViewBag.fileName = fileName; return View(); } private void RefreshThumbnail() { var destinationPath = Server.MapPath("~/ExcelFiles"); string[] filePaths = Directory.GetFiles(destinationPath); for (int i = 0; i < filePaths.Length; i++) { var filePath = filePaths[i]; ExcelEngine excelEngine = new ExcelEngine(); IApplication application = excelEngine.Excel; IWorkbook workbook = application.Workbooks.Open(filePath); IWorksheet worksheet = workbook.Worksheets[0]; Image image = worksheet.ConvertToImage(1, 1, worksheet.UsedRange.LastRow + 1, worksheet.UsedRange.LastColumn + 1, ImageType.Bitmap, null); image.Save(destinationPath + "\\Thumbnails\\" + Path.GetFileNameWithoutExtension(filePath) + ".png", ImageFormat.Png); //Close the workbook. workbook.Close(); excelEngine.Dispose(); } } private List<string> GetFilenames() { List<string> fileNames = new List<string>(); var destinationPath = Server.MapPath("~/ExcelFiles"); string[] filePaths = Directory.GetFiles(destinationPath); for (int i = 0; i < filePaths.Length; i++) fileNames.Add(Path.GetFileName(filePaths[i])); return fileNames; } [AcceptVerbs(HttpVerbs.Post)] public ActionResult Import(ImportRequest importRequest) { if (String.IsNullOrEmpty(importRequest.Url)) return importRequest.SpreadsheetActions(); else { Stream fileStream = System.IO.File.Open(Server.MapPath("~/ExcelFiles/") + importRequest.Url, FileMode.Open, FileAccess.Read); importRequest.FileStream = fileStream; importRequest.Url = null; importRequest.FileStream.Position = 0; string spreadsheetData = Spreadsheet.Open(importRequest); fileStream.Close(); return Content(spreadsheetData); } }
The following screenshots represents the output of the above code example. Index(view) ExcelView(view) |
2X faster development
The ultimate ASP.NET MVC UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.