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

[Unknown]

Hi Team,

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

[Ashokkumar Balasubramanian]

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:  

 

https://www.syncfusion.com/downloads/support/directtrac/150924/ze/filemanager-items-1994805573.zip 

 

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]

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]

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. 

 

https://ej2.syncfusion.com/aspnetmvc/documentation/pdfviewer/how-to/export-as-image/ 

 

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. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/filemanager-items1683202202.zip 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Shameer Ali Baig S. 

[Unknown]

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]

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. 

 

Document Files - https://help.syncfusion.com/file-formats/docio/word-to-image 

 

Excel Files - https://help.syncfusion.com/file-formats/xlsio/worksheet-to-image-conversion?cs-save-lang=1&cs-lang=asp.net%20core 

 

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. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/filemanager-items1651644442.zip 

 

Please let us know, if you need any further assistance. 

 

Regards, 

Shameer Ali Baig S. 

[Unknown]

Awesome. Thanks a ton

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Mahesh, 

  

Most Welcome. Please, get back to us if you need any further assistance. 

  

Regards, 

Shameer Ali Baig S.