Enable PDF Preview in SharePoint Search Result

This article describes how you can enable PDF preview in the search core results web part.

By default, PDF previews are not turned on in the search core results web part. Office Web Apps only supports Office documents such Word, Excel, PowerPoint, ad OneNote, but there is no support to preview other documents such as PDF.

To be able to preview PDF documents, you will have to develop your own preview panel to show it. There are 2 options in enabling previews for PDF:

Option 1: Create a custom PDF Hover Display Template

Here are the steps to create a custom Display Template:

1. Navigate to /_catalogs/masterpage/Display Templates/Search
2. Take a backup copy of the Item_PDF_HoverPanel.html display template. Even the masterpage list has version control enabled, it is better to keep a clean copy of this display template. Name the back-up Item_PDF_HoverPanel-original.html. Note that taking a backup means, downloading a copy of the display template locally to your machine, renaming it locally, and then re-uploading it to SharePoint.
3. Download Item_PDF_HoverPanel.html to your desktop and open it with Notepad or any other HTML editor
4. Replace the following code:

    <div id="_#= $htmlEncode(id + HP.ids.header) =#_" class="ms-srch-hover-header">
   
             _#= ctx.RenderHeader(ctx) =#_
   
    </div>
   
    <div id="_#= $htmlEncode(id + HP.ids.body) =#_" class="ms-srch-hover-body">
   
            _#= ctx.RenderBody(ctx) =#_
   
    </div>

   With this code

   <object data="_#= ctx.CurrentItem.Path =#_" type="application/pdf" width="500px" height="450px">
   
                    <p>You do not have a PDF applicaiton to preview this document.
   
                   You can <a href="_#= ctx.CurrentItem.Path =#_">click here to download the PDF file.</a></p>
   
   </object>
    

5. Save
6. Upload Item_PDF_HoverPanel.html to replace the existing one on the server
7. Publish Item_PDF_HoverPanel.html
8. Refresh your search results

Option 2: Use Word Hover Display Template

This option does not require any coding or change to the Display Template, but configuration which Template PDF should use. Here are the steps to change the use of a display template for PDF:

1. Go to Site Settings à Result Types under the root site collection
2. Locate PDF
3. Click on the dropdown list and select Copy
4. Name it PDF with Preview
5. Under What should these results look like?, pick Word Item
6. Click Save
7. Refresh your search results

Disadvantage:

There is a disadvantage for each option:

1. Option 1: It is dependent on having a PDF reader installed on the desktop to render its content. If you don't have it installed, then the preview will not show up. This can be a problem for mobile users who might not have PDF installed on their devices.
2. Option 2: The PDF application menu items will not show up if you are rendering PDF content through a Word viewer (OWA). This means, other than opening the document, users will not be able to post any action against the PDF result item such as saving, printing the document, etc…