Category / Section
How to generate and display Excel files in thumbnail view
2 mins read
Description
This knowledge base explains how to generate and display excel files in thumbnail view.
Solution
We 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)