)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to generate and display Excel files in thumbnail view

Platform: ASP.NET MVC |
Control: Spreadsheet |
Published Date: June 19, 2018 |
Last Revised Date: May 27, 2019

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

2X faster development

The ultimate ASP.NET MVC UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon