Articles in this section
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)

excel file in thumbnai lview preview sample

ExcelView(view)

excel file in mvc spreadsheet preview

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied