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

is it possible to show thumbnails for excel and PDF files similar to images?

Thread ID:

Created:

Updated:

Platform:

Replies:

150924 Jan 24,2020 10:56 AM UTC Jan 30,2020 05:54 PM UTC ASP.NET MVC - EJ 2 7
loading
Tags: FileManager
Unknown
Asked On January 24, 2020 10:56 AM UTC

Hi Team,

we want to display first page/sheet  as thumbnail in excel/pdf file. is it possible? Please let us know

Ashokkumar Balasubramanian [Syncfusion]
Replied On January 27, 2020 01:38 PM UTC

Hi Mahesh, 
 
Good day to you. 
  
Yes. We can able to show custom thumbnail images for pdf/excel type file first page instead of the default thumbnail in FileManager component.  
  
We have prepared a sample to demonstrate how to achieve the expected requirement. In file manager component, FileLoad() event is triggered each file loads. Using that event, you can remove the default thumbnail element from the pdf or excel file’s html node element and replaced it with img element that contains the src attribute which invokes the GetImage method in the service provider. In Service provider, you can add the corresponding pdf / excel file first page thumbnail image based on your requirement.  
  
Refer the below code snippet for FileLoad() event.  
 
function onFileLoad(args) { 
        if (args.module == "LargeIconsView" && args.fileDetails.type == ".pdf") { 
            args.element.firstElementChild.removeChild(args.element.querySelectorAll(".e-list-icon.e-fe-pdf")[0]); 
            var dynamicImgEle = ej.base.createElement('img', { 
                className: "e-list-img", 
                attrs: { src: getImageUrl(this, args.fileDetails) } 
            }); 
            args.element.firstElementChild.insertBefore(dynamicImgEle, args.element.firstElementChild.querySelectorAll(".e-list-text")[0]); 
        } 
    } 
 
    function getImageUrl(parent, item) { 
        var baseUrl = parent.ajaxSettings.getImageUrl ? parent.ajaxSettings.getImageUrl : parent.ajaxSettings.url; 
        var imgUrl; 
        var fileName = ej.base.getValue('name', item); 
        var fPath = ej.base.getValue('filterPath', item); 
        if (parent.hasId) { 
            // path contains ID while using ID based support 
            var imgId = ej.base.getValue('id', item); 
            imgUrl = baseUrl + '?path=' + parent.path + '&id=' + imgId; 
        } else if (fPath != null) { 
            // path is formed based on filter path while using search operation. 
            imgUrl = baseUrl + '?path=' + fPath.replace(/\\/g, '/') + fileName; 
        } else { 
            // If the image does not contains filter path, path is generated based on file name. 
            imgUrl = baseUrl + '?path=' + parent.path + fileName; 
        } 
        imgUrl = imgUrl + '&time=' + (new Date().getTime()).toString(); 
        return imgUrl; 
    } 
 
 
public ActionResult GetImage(FileManagerDirectoryContent args) 
        { 
            //Validate the image files and return the correponding pdf or excel file first page thumbnail conversion image file 
            if (args.Path.Contains(".pdf")) 
            { 
                //return this.operation.GetImage(this.basePath + "\\" + this.path, null, false, null, null); 
                return operation.GetImage("/Pictures/Employees/1.png", null, false, null, null); 
            } 
            else 
            { 
                return operation.GetImage(args.Path, args.Id, false, null, null); 
            } 
        } 
 
 
Sample:  
 
 
Could you please check the above provided sample and get back to us, if you require any further assistance on this? 
 
Regards, 
Ashokkumar B. 


Unknown
Replied On January 28, 2020 12:31 PM UTC

Thank you Ashok for quick response.

Do you have any API to extract first page as image src. As per your sample it applies to all PDF files, but we are looking to have different image per each pdf file based on their first page content

it is a manual effort to create a image for every document uploaded. right?

Shameer Ali Baig Sulaiman Ali Baig [Syncfusion]
Replied On January 29, 2020 11:51 AM UTC

Hi Mahesh, 
 
We have checked your reported issue to extract the first page of pdf file. It is possible to extract the first page of PDF file using PDF Viewer component. Refer the below link. 
 
 
To achieve your requirement, you have to import the Syncfusion.EJ2.PdfViewer.AspNet.Mvc5 in your application.  
 
After that, you have to extract the pdf file first page into a image and saved in one location. After that you have to send the image to the file manager component. Refer the below coed snippet. 
 
  //Validate the image files and return the correponding pdf or excel file first page thumbnail conversion image file 
if (args.Path.Contains(".pdf")) 
{ 
     count = count + 1; 
     var path = HostingEnvironment.MapPath("~/Content/Files"); 
    // Save the Image file path 
    var path1 = HostingEnvironment.MapPath("~/Content/Files/"); 
    //Uses the Syncfusion.EJ2.PdfViewer assembly 
    PdfRenderer pdfExportImage = new PdfRenderer(); 
    //Loads the PDF document 
    pdfExportImage.Load(path + (args.Path).Replace(@"/", @"\")); 
   //Exports the PDF document pages into images 
      // method parameters 
      // ExportAsImage (pageIndex , capture_image_width, capture_image_size) 
   Bitmap bitmapimage = pdfExportImage.ExportAsImage(0,200, 200); 
   //Save the exported image in disk 
   var ImageSave = path1 + count + ".png"; 
   bitmapimage.Save(ImageSave); 
   ImageSave = ImageSave.Replace("\\", "/"); 
  FileStream fileStreamInput = new FileStream(ImageSave, FileMode.Open, FileAccess.Read); 
   FileStreamResult fileStreamResult = new FileStreamResult(fileStreamInput, "APPLICATION/octet-stream"); 
    // Return the image. 
  return fileStreamResult; 
} 

We have modified the sample for your requirement. Refer the sample link below. 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Shameer Ali Baig S. 


Unknown
Replied On January 30, 2020 10:24 AM UTC

Thank you Shameer. The below solutoin works  fine if the folder has only one pdf file. if it has more than one pdf file it fails at bitmapimage.Save because count is 0 always, anyways we can use file name instead to give distinct name for image

How about Doc,DocX,.xls,xlsx file> do you have any APIs to extract first page for these file types. Please let us know 

Shameer Ali Baig Sulaiman Ali Baig [Syncfusion]
Replied On January 30, 2020 01:13 PM UTC

Hi Mahesh, 
 
We have checked your reported issue to extract the first page of xlsx, docx extension. To achieve your requirement, you have to install the below dependent package. 
 
Document Files  
Syncfusion.DocIO.AspNetMvc5, Syncfusion.OfficeChartToImageConverter.WPF, 
Syncfusion.SfChart.WPF 
Excel Files 
Syncfusion.XlsIO.AspNet.MVC5 

Refer the below code to extract the image based on files extension in server side. 
 
        public ActionResult GetImage(FileManagerDirectoryContent args, string filename) 
        { 
            var path = HostingEnvironment.MapPath("~/Content/Files"); 
            var path1 = HostingEnvironment.MapPath("~/Content"); 
            //Validate the image files and return the correponding pdf or excel file first page thumbnail conversion image file 
            if (args.Path.Contains(".pdf")) 
            { 
                count = count + 1;            
                // Save the Image file path 
                //var path1 = HostingEnvironment.MapPath("~/Content/Files/"); 
                //Uses the Syncfusion.EJ2.PdfViewer assembly 
                PdfRenderer pdfExportImage = new PdfRenderer(); 
                //Loads the PDF document 
                pdfExportImage.Load(path + (args.Path).Replace(@"/", @"\")); 
                //Exports the PDF document pages into images 
                Bitmap bitmapimage = pdfExportImage.ExportAsImage(0,200, 200); 
                //Save the exported image in disk 
                var ImageSave = path1 + count + ".png"; 
                bitmapimage.Save(ImageSave); 
                ImageSave = ImageSave.Replace("\\", "/"); 
                FileStream fileStreamInput = new FileStream(ImageSave, FileMode.Open, FileAccess.Read); 
                FileStreamResult fileStreamResult = new FileStreamResult(fileStreamInput, "APPLICATION/octet-stream"); 
                // Return the image. 
                return fileStreamResult; 
            } 
            else if(args.Path.Contains(".docx")) 
            { 
                count = 3; 
                WordDocument wordDocument = new WordDocument(path + (args.Path).Replace(@"/", @"\"), FormatType.Docx); 
                //Initializes the ChartToImageConverter for converting charts during Word to image conversion 
                wordDocument.ChartToImageConverter = new ChartToImageConverter(); 
                //Sets the scaling mode for charts (Normal mode reduces the file size) 
                wordDocument.ChartToImageConverter.ScalingMode = Syncfusion.OfficeChart.ScalingMode.Normal; 
                //Converts word document to image 
                Image[] images = wordDocument.RenderAsImages(Syncfusion.DocIO.DLS.ImageType.Bitmap); 
                var ImageSave = path1 + count + ".png"; 
                images[0].Save(ImageSave, ImageFormat.Jpeg); 
                //Closes the document 
                ImageSave = ImageSave.Replace("\\", "/"); 
                FileStream fileStreamInput = new FileStream(ImageSave, FileMode.Open, FileAccess.Read); 
                FileStreamResult fileStreamResult = new FileStreamResult(fileStreamInput, "APPLICATION/octet-stream"); 
                // Return the image. 
                return fileStreamResult; 
            } 
            else if(args.Path.Contains(".xlsx")) 
            { 
                count = 4; 
                ExcelEngine excelEngine = new ExcelEngine(); 
                IApplication application = excelEngine.Excel; 
                application.DefaultVersion = ExcelVersion.Excel2013; 
                Syncfusion.XlsIO.IWorkbook workbook = application.Workbooks.Open(path + (args.Path).Replace(@"/", @"\"), ExcelOpenType.Automatic); 
                IWorksheet sheet = workbook.Worksheets[0]; 
                var ImageSave = path1 + count + ".png"; 
                //Convert as bitmap 
                Image image = sheet.ConvertToImage(1, 1, 10, 20); 
                image.Save(ImageSave, ImageFormat.Png); 
                ImageSave = ImageSave.Replace("\\", "/"); 
                FileStream fileStreamInput = new FileStream(ImageSave, FileMode.Open, FileAccess.Read); 
                FileStreamResult fileStreamResult = new FileStreamResult(fileStreamInput, "APPLICATION/octet-stream"); 
                // Return the image. 
                return fileStreamResult; 
            } 
            else 
            { 
                return operation.GetImage(args.Path, args.Id, false, null, null); 
            } 
        } 

To know more about this, refer the below link. 
 
 
 
For your reference, we have prepared a simple sample for file manager. In that sample, we have used default count variable for saving the image. You can use the image name based on your requirement. 
 
Refer the sample link below. 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Shameer Ali Baig S. 


Unknown
Replied On January 30, 2020 01:56 PM UTC

Awesome. Thanks a ton

Shameer Ali Baig Sulaiman Ali Baig [Syncfusion]
Replied On January 30, 2020 05:54 PM UTC

Hi Mahesh, 
  
Most Welcome. Please, get back to us if you need any further assistance. 
  
Regards, 
Shameer Ali Baig S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

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

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