Generate Thumbnail From Live URL Of Microsoft Office And PDF file in ASP.NET MVC

This article will demonstrate how to create a thumbnail image from live Microsoft Office documents and PDF documents.

Recently, I got a chance to create thumbnail images from the live URL. The URLs were not of images but of some DOCX file, some XLSX file, or PDF file. We don’t have any custom library which can directly generate the thumbnail from a live URL. So, here, we will learn how we can customize our code to generate the thumbnail in .NET.

Getting thumbnails from images is not a very tough task; we can directly convert our image to Bitmap type and generate a thumbnail. So, it’s very simple and lots of articles are available there already on the Internet.

But getting thumbnails from live URLs (Docx, Xls, and PDF) is not tough but tricky. We have to make some extra effort to complete the thumbnail generation from these URLs.

For this demonstration, I am going to use ASP.NET MVC project and we are going to create the thumbnails from Microsoft Office Documents and PDF as well. These documents can be Microsoft Word document or Microsoft Excel worksheets or even PDF docs.

To create a new project, just follow the following instructions.

Open Visual Studio 2013/2015/2017
Go to File >> New >> Project.
From the "New Project" window, select “ASP.NET Web Application”.
Browse the location to save the project and provide a suitable name and click "OK".
From the next window, select MVC as a template and click "OK".

The project is ready for demonstration. To generate a thumbnail from the live URL, we will follow the given instructions.

Download file in PDF format on temp location.
Convert PDF file to a Bitmap image.
Generate a thumbnail as Bitmap from the original Bitmap image.
Save it to the preferred location.
To show on View, convert it to Base64String and bind with the <img> tag.

Above, we have defined a couple of things which need to be completed to generate a thumbnail from the live URL and save it to any location or show it on the View.

It’s very easy to convert a PDF file into the image rather than converting any Microsoft Office file. So, here, we will first download these files at a temporary location and then convert these into PDF forms. Once the PDF is available, we can generate the image from that.

If you try to convert Microsoft Office files to PDF directly without Microsoft.Office.Interop, then it will be corrupted and the thumbnail will not be generated. So, basically, we cannot directly convert a live URL content to Bytes or Stream. To do that, we have to generate a PDF and perform the thumbnail task.

Here, we are going to generate a thumbnail from three different types of file - DOCX, XLSX, and PDF. To download and generate PDF from DOCX and XLSX, we will use the “Microsoft.Office.Interop”.

Following is the class name as “TypeConversion” which will help us to download and convert the file type from DOCX, XLSX to PDF at the temporary location from the live URL.

using System;
using Word = Microsoft.Office.Interop.Word;
using Excel = Microsoft.Office.Interop.Excel;
using System.IO;
using System.Net;
namespace GenerateThumbnails.Conversion
{
public class TypeConversion
{
private string _tempLocation = Path.GetPathRoot(Environment.SystemDirectory) + "WBTemp";
Word.Application wordApp = null;
Word.Documents wdDocuments = null;
Word.Document wdDocument = null;
Excel.Application excelApp = null;
Excel.Workbooks xlBooks = null;
Excel.Workbook xlBook = null;
public bool WordToPdf(string _sourcePath, out string _outputTempFilePath)
{
wordApp = new Word.Application();
wdDocuments = wordApp.Documents;
try
{
//Read word document file
wdDocument = wdDocuments.Open(_sourcePath);
_outputTempFilePath = string.Empty;
if (wdDocument != null)
{
_outputTempFilePath = GetTempTargetFilePath(_tempLocation);
//Export word document file to pdf format
wdDocument.ExportAsFixedFormat(_outputTempFilePath, Word.WdExportFormat.wdExportFormatPDF);
return true;
}
}
catch (Exception ex)
{
_outputTempFilePath = string.Empty;
return false;
}
finally
{
// Cleanup
GC.Collect();
GC.WaitForPendingFinalizers();
wdDocument.Close(false);
NAR(wdDocument);
NAR(wdDocuments);
wordApp.Quit();
NAR(wordApp);
}
return false;
}
public bool ExcelToPdf(string _sourcePath, out string _outputTempFilePath)
{
excelApp = new Excel.Application();
try
{
//Read word document file
xlBooks = excelApp.Workbooks;
xlBook = xlBooks.Open(_sourcePath);
_outputTempFilePath = string.Empty;
if (xlBook != null)
{
_outputTempFilePath = GetTempTargetFilePath(_tempLocation);
//Export word document file to pdf format
xlBook.ExportAsFixedFormat(Excel.XlFixedFormatType.xlTypePDF, _outputTempFilePath);
return true;
}
}
catch (Exception ex)
{
_outputTempFilePath = string.Empty;
return false;
}
finally
{
// Cleanup
GC.Collect();
GC.WaitForPendingFinalizers();
xlBook.Close(false);
NAR(xlBook);
NAR(xlBooks);
excelApp.Quit();
NAR(excelApp);
}
return false;
}
public bool PdfURLToPdf(string _sourcePath, out string _outputTempFilePath)
{
using(var client = new WebClient())
{
_outputTempFilePath = GetTempTargetFilePath(_tempLocation);
client.DownloadFile(_sourcePath, _outputTempFilePath);
return true;
}
}
private void NAR(object o)
{
try
{
while (System.Runtime.InteropServices.Marshal.ReleaseComObject(o) > 0) ;
}
catch { }
finally
{
o = null;
}
}
public static string GetTempTargetFilePath(string _targetTempPath)
{
string _tempFilePath = string.Empty;
//Check temp directory exists or not
if (!Directory.Exists(_targetTempPath))
{
//Create new temp directory
Directory.CreateDirectory(_targetTempPath);
}
var _fileName = "temp.pdf";
_tempFilePath = _targetTempPath + "/" + _fileName;
if (File.Exists(_tempFilePath))
{
File.Delete(_tempFilePath);
}
return _tempFilePath;
}
}
}

As you can see here, in the following class, we have three methods - WordToPdf, ExcelToPdf, and PdfURLtoPdf. These methods basically take two parameters as source path and output temp path. The source path is basically a live URL of the documents and the temp path is where a PDF is generated at a temporary location.

To create temp location, first, we are creating a temporary folder using the following code.

private string _tempLocation = Path.GetPathRoot(Environment.SystemDirectory) + "WBTemp";

And before downloading the file on this location, we should check if the folder location exists or not. If the folder doesn’t exist, then it should be created.

public static string GetTempTargetFilePath(string _targetTempPath)
{
string _tempFilePath = string.Empty;
//Check temp directory exists or not
if (!Directory.Exists(_targetTempPath))
{
//Create new temp directory
Directory.CreateDirectory(_targetTempPath);
}
var _fileName = "temp.pdf";
_tempFilePath = _targetTempPath + "/" + _fileName;
if (File.Exists(_tempFilePath))
{
File.Delete(_tempFilePath);
}
return _tempFilePath;
}

For Microsoft Word document, we should first open the document and then export it to PDF format as following.

//Export word document file to pdf format
wdDocument.ExportAsFixedFormat(_outputTempFilePath, Word.WdExportFormat.wdExportFormatPDF);

And, for Microsoft Excel, we should open the workbook of the Excel document and then export it to PDF format.

NOTE

Be careful when using Microsoft.Office.Interop COM components because it generates memory overhead. So, leaving the method, be sure you have disposed of non-required COM component instances as we do in the "Finally" block.

We should release all the memory objects until all the referenced COM components disposed of, as follows. This is a best practice and it’s recommended by Microsoft.

private void NAR(object o)
{
try
{
while (System.Runtime.InteropServices.Marshal.ReleaseComObject(o) > 0) ;
}
catch { }
finally
{
o = null;
}
}

NOTE

When using COM component, always follow the rule “don’t use double dots”.

To download a live PDF file, we use WebClient which has a method as “DownloadFile” that takes two parameters - the first one is source live path and the other one is where the file will be downloaded. Here, we don’t need any file type conversion because we are working on the PDF itself to convert it to a Bitmap for thumbnail generation.

NOTE

Using WebClient, we can download any type of file in the same format.

Above, we are done converting our live URLs of DOCX, XLSX, and PDF to a local file as PDF. Now, we can move to generate thumbnails from the temp PDF file.

Now, we have a PDF file saved locally at a temp location. To generate thumbnails from these PDF files, we have created one more class as “Thumbnails” which has a method “GetThumbnail” that takes the source path of temporarily saved PDF file and returns a Bitmap image as a thumbnail. Here, we are using the default width and height of the thumbnail image as 150px and 180px respectively. You can customize this code and pass the width and height as a parameter.

In this method, first, we are generating an original Bitmap image from a temporary PDF file and then resize and compress it to export thumbnail based on the image size.

To directly generating the Bitmap from PDF file as an original image, we are using “Microsoft.WindowsAPICodePack.Shell.ShellFile” which takes source path of PDF and returns an output as a Bitmap image. Following is the whole source code for the thumbnail class.

using Microsoft.WindowsAPICodePack.Shell;
using System;
using System.IO;
using System.Drawing;
namespace GenerateThumbnails.Conversion
{
public class Thumbnails
{
public Bitmap GetThumbnail(string _sourcePath)
{
const int bmpW = 150;
const int bmpH = 180;
Bitmap upBmp = null;
if (!string.IsNullOrEmpty(_sourcePath))
{
if (Path.GetExtension(_sourcePath).ToLower() == ".pdf")
{
ShellFile shellFile = ShellFile.FromFilePath(_sourcePath);
upBmp = shellFile.Thumbnail.ExtraLargeBitmap;
}
}
if (upBmp != null)
{
Int32 newWidth = bmpW;
Int32 newHeight = bmpH;
Bitmap newBmp = new Bitmap(newWidth, newHeight, System.Drawing.Imaging.PixelFormat.Format24bppRgb);
newBmp.SetResolution(72, 72);
Double upWidth = upBmp.Width;
Double upHeight = upBmp.Height;
int newX = 0;
int newY = 0;
Double reDuce;
if (upWidth > upHeight)
{
reDuce = newWidth / upWidth;
newHeight = ((Int32)(upHeight * reDuce));
newY = ((Int32)((bmpH - newHeight) / 2));
newX = 0;
}
else if (upWidth < upHeight)
{
reDuce = newHeight / upHeight;
newWidth = ((Int32)(upWidth * reDuce));
newX = ((Int32)((bmpW - newWidth) / 2));
newY = 0;
}
else if (upWidth == upHeight)
{
reDuce = newHeight / upHeight;
newWidth = ((Int32)(upWidth * reDuce));
newX = ((Int32)((bmpW - newWidth) / 2));
newY = ((Int32)((bmpH - newHeight) / 2));
}
Graphics newGraphic = Graphics.FromImage(newBmp);
try
{
newGraphic.Clear(Color.White);
newGraphic.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
newGraphic.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
newGraphic.DrawImage(upBmp, newX, newY, newWidth, newHeight);
return newBmp;
}
catch (Exception ex)
{
string newError = ex.Message;
// lblError.Text = newError;
}
finally
{
upBmp.Dispose();
// newBmp.Dispose();
newGraphic.Dispose();
}
}
return upBmp;
}
public void SavethumbnailToImage(Bitmap _bitmapImage, string _imagePath, string _typeOfImage)
{
if (_typeOfImage == "JPEG")
_bitmapImage.Save(_imagePath, System.Drawing.Imaging.ImageFormat.Jpeg);
else
_bitmapImage.Save(_imagePath, System.Drawing.Imaging.ImageFormat.Png);
}
}
}

Once the thumbnail is generated, we can do two things. Either we can save it in any preferred location or directly show on the browser. Here, we are doing both the tasks.

First, saving the thumbnail image on preferred location as the following code shows and then removing the original temporary PDF file.

if (!string.IsNullOrEmpty(tempPath))
{
if (bitmapThumb != null)
{
thumbnail.SavethumbnailToImage(bitmapThumb, Path.GetPathRoot(Environment.SystemDirectory) + "WBTemp/" + DateTime.Now.Date.Day.ToString() + DateTime.Now.Date.Month.ToString()+ DateTime.Now.Date.Year+ DateTime.Now.Date.Hour+ DateTime.Now.Date.Minute+ DateTime.Now.Date.Second + ".jpef", "JPEG");
}
if (System.IO.File.Exists(tempPath))
{
System.IO.File.Delete(tempPath);
}
}

Saving can be done in any format. For this demonstration, we have created the following method which saves the Bitmap image to JPEG or PNG format.

public void SavethumbnailToImage(Bitmap _bitmapImage, string _imagePath, string _typeOfImage)
{
if (_typeOfImage == "JPEG")
_bitmapImage.Save(_imagePath, System.Drawing.Imaging.ImageFormat.Jpeg);
else
_bitmapImage.Save(_imagePath, System.Drawing.Imaging.ImageFormat.Png);
}

Now, it’s time to show the thumbnail image on the View. So, to do this, we will first convert a thumbnail to Byte array and then convert it to Base64String that can be rendered on the View.

MemoryStream ms = new MemoryStream();
bitmapThumb.Save(ms, ImageFormat.Jpeg);
byte[] bmpBytes = ms.ToArray();
string base64String = Convert.ToBase64String(bmpBytes);
ViewBag.Image = base64String;
return View();

Following is the whole source code for the HomeController.cs where we are checking the file type based on their extension and then performed operation accordingly.

using System;
using System.Web.Mvc;
using System.IO;
using System.Drawing.Imaging;
using GenerateThumbnails.Conversion;
namespace GenerateThumbnails.Controllers
{
public class HomeController : Controller
{
public HomeController() { }
public ActionResult Index()
{
ViewBag.Title = "Home Page";
return View();
}
[HttpPost]
public ActionResult Index(string fileUrl)
{
//var path = "https://ol.baker.edu/webapps/dur-browserCheck-bb_bb60/samples/sample.xlsx?";
//var path = "https://calibre-ebook.com/downloads/demos/demo.docx";
if (!string.IsNullOrEmpty(fileUrl))
{
var tempPath = string.Empty;
TypeConversion typeConv = new TypeConversion();
if (Path.GetExtension(fileUrl).ToLower() == ".doc" || Path.GetExtension(fileUrl).ToLower() == ".docx" || Path.GetExtension(fileUrl).ToLower().Contains(".docx") || Path.GetExtension(fileUrl).ToLower().Contains(".doc"))
{
typeConv.WordToPdf(fileUrl.ToString(), out tempPath);
}
else if (Path.GetExtension(fileUrl).ToLower() == ".xlsx" || Path.GetExtension(fileUrl).ToLower().Contains(".xlsx"))
{
typeConv.ExcelToPdf(fileUrl.ToString(), out tempPath);
}
else if (Path.GetExtension(fileUrl).ToLower() == ".pdf" || Path.GetExtension(fileUrl).ToLower().Contains(".pdf"))
{
typeConv.PdfURLToPdf(fileUrl.ToString(), out tempPath);
}
else
{
return View();
}
Thumbnails thumbnail = new Thumbnails();
var bitmapThumb = thumbnail.GetThumbnail(tempPath);
if (!string.IsNullOrEmpty(tempPath))
{
if (bitmapThumb != null)
{
thumbnail.SavethumbnailToImage(bitmapThumb, Path.GetPathRoot(Environment.SystemDirectory) + "WBTemp/" + DateTime.Now.Date.Day.ToString() + DateTime.Now.Date.Month.ToString()+ DateTime.Now.Date.Year+ DateTime.Now.Date.Hour+ DateTime.Now.Date.Minute+ DateTime.Now.Date.Second + ".jpef", "JPEG");
}
if (System.IO.File.Exists(tempPath))
{
System.IO.File.Delete(tempPath);
}
}
MemoryStream ms = new MemoryStream();
bitmapThumb.Save(ms, ImageFormat.Jpeg);
byte[] bmpBytes = ms.ToArray();
string base64String = Convert.ToBase64String(bmpBytes);
ViewBag.Image = base64String;
return View();
}
return View();
}
}
}

On the client side [On View], we have created one form where we are passing the live URL of Docx, Xlsx, or Pdf file and click "Submit" button. On submit, it will perform the operation for generating the thumbnail image. Following is the source code for View (Index.cshtml).

<div class="row">
@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<section id="contact">
<div class="section-content">
<h1 class="section-header">Generate <span class="content-header wow fadeIn " data-wow-delay="0.2s" data-wow-duration="2s"> Thumbnail</span></h1>
<h3>Generate thumbnail using live url of docx, xlsx and pdf file</h3>
</div>
<div class="contact-section">
<div class="container">
<form>
<div class="col-md-6 form-line">
<div class="form-group">
<label for="exampleInputUsername">Enter File URL</label>
<input type="text" class="form-control" name="fileUrl" width="300" id="" placeholder="Enter URL Here">
</div>
<div class="form-group" style="float:left;">
<button type="submit" class="btn btn-default submit"><i class="fa fa-paper-plane" aria-hidden="true"></i> Generate Thumbnail</button>
<br />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="description"> Images</label>
<br />
<span>
# Default Thumbnail Width =150 and Height =180
</span>
<br />
@if (ViewBag.Image != null)
{
<img src="@String.Format("data:image/png;base64,{0}", ViewBag.Image)" />
}
</div>
</div>
</form>
</div>
</div>
</section>
}
</div>

To show the generated thumbnail live on View after generation, first, we are converting the image byte data to Base64String and pass it to View using ViewBag from Controller. On the View side, we are using an <img> tag which takes the image data as base64 format and then shows the image live.

@if (ViewBag.Image != null)
{
<img src="@String.Format("data:image/png;base64,{0}", ViewBag.Image)" />
}

Here is the final output for this demonstration. Now, I am going to pass the following URL which is nothing but a Docx file's HTTP URL and click "Generate Thumbnail" button. The output will be produced as in the above image.

Thanks for reading this article. Please share your valuable comments and feedbacks.

1 Comment

Join the conversation! Your thoughts help the community grow.

nilesh makadiya4y ago
Hello Mukesh, I created the MVC application as you described above. When I created a thumbnail image for "Excel" and "pdf" file that time thumbnail image was created but when I open that file and display the only logo of pdf. not display the content of the first page of pdf and excel file. When I created a thumbnail image for the "word" file, that time I got an error. I attached a screenshot of the thumbnail image. Please check the snapshot (https://prnt.sc/26jfxh4). I attached the source code of the project. Check snapshot for Thumbnail.cs (https://prnt.sc/26jg1jf). Check snapshot of TypeConversion.cs (https://prnt.sc/26jg5y0). Check snapshot of ThumbnailController.cs (https://prnt.sc/26jg7o4). Please provide your feedback. Thanks Nilesh