Create PDF thumbnail view in column using iframes

This is how I created a thumbnail view of PDF files in a Document Library.

Using a Document Library to store PDF Files. Call it “Uploads”

1: Create workflow using SharePoint Designer to copy Name column to Title column.  This will allow us to use the Title column in a Calculated Column.  This Blog post describes the process:

2: Add a Calculated Column to the document library, call it “Preview”

Copy this formula:

=CONCATENATE("<DIV><iframe width='200px', height='200px', scrolling='no', src='http://server/uploads/",Title,".pdf#page=1&toolbar=0&scrollbar=0&navpanes=0&statusbar=0'></iframe></DIV>")

* change http address to your SharePoint server name and change to location of PDF files.  

3:  Add a Content Editor Web Part to the Document Libary view and copy the link to Christophe’s Text to HTML code:

Or use the Calc column, Number option work-around.

<script type="text/javascript">// <![CDATA[
// Text to HTML
// Feedback and questions:
var theTDs = document.getElementsByTagName("TD");
var i=0;
var TDContent = " ";
while (i < theTDs.length)
TDContent = theTDs[i].innerText || theTDs[i].textContent;
if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>

") >= 0)) {
theTDs[i].innerHTML = TDContent;
// ]]></script>

That’s it, upload your pdf files, test and adjust.

One down-side is the page does load a little slow as it’s trying to load multiple pdf files.

I’ve tested it on IE9 and IE7 using different hardware and the page loads fine for my purposes.

If someone knows of a solution that can be used to convert the first page to a picture thumbnail that would be better for performance, or if you have any questions, please post in the comments section below.

Thanks for reading.

Request from to Ben, here is the calculated column as it should appear.

*Please note, you must have the filename of the PDF in the TITLE Column.
* Using Number as the data type, you won’t require Christophe’s code snippet above.




24 thoughts on “Create PDF thumbnail view in column using iframes

  1. malgoul2000 March 11, 2019 / 7:19 am

    Hi, it is a nice code you did. I have a question, is it possible to add a folder , actually it is not working with subfolders.

    • Brett March 11, 2019 / 9:46 am

      Hi Malgoul, I haven’t used this for a number of years but this feature isn’t configured to work with folders.

  2. anas aznur hairuddin March 29, 2018 / 8:51 am

    Hi brett, i follow ever single step you provide. Unfortunately, the preview still doesn’t work. It shows the code instead of magnifying glass icon.Do i need to change the url? if needed, can you give me some example for the url because i change the url to my sharepoint domain but still no luck.

    • Brett March 29, 2018 / 8:55 am

      Hi, if SharePoint 2010 and if you’re seeing the html code, try changing the format type to Number as per image above.

  3. Natasha Gondi October 15, 2016 / 2:45 am

    Hi ,

    It works! thank you so much.

    Can we do this for other types of documents like, .doc, .docx, .xlsx etc etc

    • Brett October 15, 2016 / 10:40 am

      Hi Natasha, good job getting this working. At the time I could only use it for PDFs as the iframe href is used with PDFs.
      The Site Assets library, Rich Media Asset type does save the office thumbnail.
      So it could be possible combining this post with a Site Assets library. And maybe a Calc Column has IF statements for each file type?
      When I get some spare time, (which is rare) I’ll do some testing and see if can be done.

  4. Norbert Matyas July 6, 2015 / 9:49 pm

    Hey guys, I am getting the following error when trying to add the column
    Sorry, something went wrong
    The formula contains a syntax error or is not supported.

    Any ideas?

    • Brett July 6, 2015 / 10:08 pm

      Hi Norbet, If you copied and pasted the code above, make sure you paste it to a Notepad first and replace the ” and ‘. WordPress doesn’t like using iframe code in their pages.

      • Norbert Matyas July 6, 2015 / 10:31 pm

        Can you please tell me replace the ” and ‘ with what?That is what i try to figure out for the last 2 hours.Thanks or the quick reply

      • Brett July 7, 2015 / 7:58 am

        The replacement is of the same characters. If you type in notepad the ” double quote marks it looks different to the curved double quote marks shown above.
        Or type out the calculated column formula in notepad or a html editor rather than copy and paste it.
        Thanks for giving it a try, good luck.

    • Brett July 10, 2013 / 1:19 pm

      Thanks Alexander, The Harepoint thumbnail product costs $1500 per WFE and you need to install it on the server. All of the solutions in this Blog are designed for Site Owners who do not have access to the SharePoint Server.

  5. Ben December 14, 2012 / 5:37 am

    Is there any way you can post a screenshot of the calculation field in SharePoint that you created. I have tried with the above but no joy.

  6. Brett November 22, 2012 / 10:51 am

    Hi Justin,
    Please check the Calculated column formula and replace all ” and ‘ symbols as WordPress changes them when added to a Blog.
    Also, you can bypass Step 3 by changing the calculated column data type returned to “number (1, 1.0, 100)” which will display the calculated column in html.
    One more thing is to verify the File Name is being copied to the Title Column.
    If you have any more issues, please let me know.

    • Justin Roach November 27, 2012 / 9:40 am

      That worked. I changed the column to “number (1, 1.0, 100)”. However the picture that shows up is just the upper left hand corner of the pdf. Is there any way to change this to another location of the page or the entire pdf?

      Thank you,

      Justin Roach
      Network Technician
      IS Support Specialist
      InCyte Pathology
      (509) 892-2793

      • Brett November 27, 2012 / 9:49 am

        Justin, glad you got the iframe to work.
        The iframe code has all the info you need to debug further.
        If you’re not getting the thumbnail, paste your iframe src into a new browser window and check your result. If it’s formatted correctly you should see just a thumbnail size PDF.
        If you need a different page of the pdf just change page=1 to the page you desire.

        Also, be careful loading up an entire list of PDF’s with this as it may degrade the performance as it’s trying to open multiple PDF files. Perhaps try with one to three in a list to begin with.

      • Justin Roach November 27, 2012 / 10:38 am

        What does the “preview.txt” do. I think it may be that piece of it that is not working. Because I can deleted it and the pdf still shows up in the library but I can’t get it to be a thumbnail of the entire page. Just one corner.

        Justin Roach
        Network Technician
        IS Support Specialist
        InCyte Pathology
        (509) 892-2793

      • Justin November 27, 2012 / 10:44 am

        What I meant in that last comment was the text file that the Content Editor web part is pointing too.

      • Brett November 27, 2012 / 12:22 pm

        Justin, I’m not sure where you’re going wrong there is no preview.txt in my post. You’re going to have to self-diagnose your error Dude. I’ve helped as far as I can, the rest is up to you, good luck.

  7. Justin November 22, 2012 / 10:04 am

    I am not able to get this to work properly. I just be missing something. All that is happening is that it is just displaying the formula in the preview column. Any ideas?

Post a Comment

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s