Create An Easy PDF Preview for Search Results in SharePoint 2013


I saw this question flying around the other day and thought it was kind of interesting.  Someone was asking about the cool new thumbnail previews you get for items in search results in SharePoint 2013.  They really liked how Microsoft Office documents work and wanted to be able to do the same thing with PDF files.  There was an answer, which is a good one, that you could create a custom WOPI extension that would render PDF files using Office Web Apps.  The drawback to that is that it requires someone to do some coding and testing (using full trust code), then deploy it to your OWA farm, then create a new WOPI binding in the SharePoint farm.  Again, an entirely reasonable response if your requirements dictate that.

I, however, representing all that is good about being lazy and cheap, decided to take a different approach to this.  Without digging into the particulars of how all the plumbing works, at the end of the day a search results preview for Office documents are just done via an iFrame.  So why not do the same thing for PDF documents?  Why not indeed – that's exactly what I did.  Here's all I did to make this work:

  1. I went to my search center site and download a copy of the Item_PDF.html, which is the out ofthe box display template for a PDF item in SharePoint 2013.  I made the following changes to it:
  1. Changed the Title to "PDF by Steve"
  2. Changed the hoverUrl variable in the javascript to "~sitecollection/_catalogs/masterpage/Display Templates/Search/Item_Site_HoverPanel.js"
  • I saved it as PDF_Default.html and went back to my SharePoint search center site, then navigated to Site Settings…Master pages and page layouts…Display Templates…Search and uploaded it.
  • I went back to Site Settings and selected Search Result Types in the Site Collection Administration section.
  • I created a Search Result Type and configured it as follows:
  1. Name:  PDF Viewer
  2. What types of content should match? :  PDF
  3. What should these results look like?  :  PDF by Steve

That's it – now you're ready to go.  One thing to point out here – in step 1b I configured the display template to use the hover panel that comes out of the box for sites.  It is configured to use an iFrame and render it nice and pretty, so I didn't even have to create a hover panel for it.  As a side note I actually DID do that when I was fooling around, but the out of the box stuff looks so much better than what I can do I figured why fight it – graphical beauty ain't my thing.  Once it's done I get a nice preview for my PDF documents in search results, which you can see here:

That's all there is too it.  I've attached my display template here, just in case you are as lazy and cheap as I am.  🙂   Hope everyone has a Merry Christmas and Happy New Year.

UPDATE:  I did discover one big limitation with this approach – it only works if your PDF documents are in the same host as your search center, i.e. if they are in the same web application is the easiest example.  So if you have your search center at http://www.foo.com, but your PDFs are in http://www.bar.com then they will not be displayed as preview items.  That's because of some X-Frame-Options headers that we send down with SharePoint now. If you are following our new recommendations for SharePoint 2013 to use a single web application for your farm then you will be fine, but if you have multiple web applications or are crawling content from non-SharePoint sites then it will not render in the preview.

 

Couple other possible gotchas to be aware of – 1) make sure you have installed the Adobe reader on the machine on which you are viewing the previews and 2) I've got at least one report saying this doesn't work in a non Internet Explorer browser.

 

PDF_Default.html

Comments (18)

  1. Hey @Mike, yeah I noticed that too.  I just changed my base template from Item_Default.html to Item_PDF.html.  It only takes about 30 seconds to create a new one so it wasn't a big deal.  After doing that the PDF icon starts showing up for it again.

  2. alexandrad9x says:

    Tao http://dichvuketoanlongbien.com/
    Rủa
    http://dichvuketoanlongbien.com/a2-96-dich-vu-ke-toan-tron-goi.html
    Thằng http://dichvuketoanlongbien.com/a2-98-dich-vu-ke-toan-thue.html
    Cờ
    http://dichvuketoanlongbien.com/a2-103-dich-vu-bao-cao-tai-chinh.html
    http://dichvuketoanlongbien.com/a2-97-dich-vu-quyet-toan-thue.html
    Nào
    http://dichvuketoanlongbien.com/a2-114-dich-vu-ke-toan-tai-29-quan-huyen.html
    Soi
    http://dichvuketoanlongbien.com/i780-dich-vu-ke-toan-thue-tron-goi-tai-bac-ninh.html
    Tài
    http://dichvuketoanlongbien.com/i779-dich-vu-ke-toan-thue-tron-goi-tai-bac-giang.html
    Khoản
    http://dichvuketoanlongbien.com/i778-dich-vu-ke-toan-thue-tron-goi-tai-phu-tho.html

    http://dichvuketoanlongbien.com/i781-dich-vu-ke-toan-thue-tron-goi-tai-hung-yen.html
    Link
    http://dichvuketoanlongbien.com/i782-dich-vu-ke-toan-thue-tron-goi-tai-vinh-phuc.html
    Của
    http://dichvuketoanlongbien.com/i783-dich-vu-ke-toan-thue-tron-goi-tai-hai-phong.html
    Tao. http://www.trungtamketoan.com.vn/
    Chúng
    http://www.trungtamketoan.com.vn/p/trung-tam-dao-tao-ke-toan-tai-ha-noi.html
    Mày
    http://www.trungtamketoan.com.vn/p/trung-tam-dao-tao-ke-toan-tai-tp-hcm.html
    Đủ
    http://www.trungtamketoan.com.vn/p/trung-tam-dao-tao-ke-toan-tai-quang-ninh.html
    Trình
    http://www.trungtamketoan.com.vn/p/trung-tam-dao-tao-ke-toan-tai-hai-duong.html
    Thì
    http://www.trungtamketoan.com.vn/p/trung-tam-dao-tao-ke-toan-tai-bac-giang.html
    Tự
    http://www.trungtamketoan.com.vn/p/trung-tam-dao-tao-ke-toan-tai-bac-ninh.html
    Đi
    http://www.trungtamketoan.com.vn/p/trung-tam-dao-tao-ke-toan-tai-hai-phong.html

    http://www.trungtamketoan.com.vn/p/trung-tam-dao-tao-ke-toan-tai-nam-dinh.html
    Làm.
    http://www.trungtamketoan.com.vn/p/trung-tam-dao-tao-ke-toan-tai-thai-binh.html
    Việc
    http://www.trungtamketoan.com.vn/p/trung-tam-dao-tao-ke-toan-tai-thanh-hoa.html

    http://www.trungtamketoan.com.vn/p/trung-tam-dao-tao-ke-toan-tai-vinh-phuc.html
    Phải
    http://www.trungtamketoan.com.vn/p/trung-tam-dao-tao-ke-toan-tai-hung-yen.html
    Rẻ
    http://www.trungtamketoan.com.vn/p/trung-tam-dao-tao-ke-toan-tai-phu-tho.html
    Rách
    http://www.trungtamketoan.com.vn/p/trung-tam-dao-tao-ke-toan-tai-binh-duong.html
    Như http://www.tosvn.com
    Thế. http://iketoan247.blogspot.com
    Loại http://tailieuveketoan.blogspot.com
    Chó http://mauhinhnendep.blogspot.com
    Má. http://www.tosvn.com/search/label/Hack%20CF
    Tao http://www.tosvn.com/search/label/Hack%20AvatarStar
    Rủa http://www.tosvn.com/search/label/Hack%20Warcraft-Dota2
    Những http://hocketoan360.com/category/tai-lieu-ke-toan/
    Thằng http://iketoan247.blogspot.com/search/label/thong-tin-kinh-te
    Soi http://iketoan247.blogspot.com/search/label/tin-bai-ve-thue
    Tao http://hoclamketoan.edu.vn/
    Sẽ http://hoclamketoan.edu.vn/category/khoa-hoc-ke-toan
    Tan http://hoclamketoan.edu.vn/category/dich-vu-ke-toan
    Cửa http://hoclamketoan.edu.vn/category/hoc-lam-ke-toan
    Nát http://hoclamketoan.edu.vn/category/tai-lieu-ke-toan
    Nhà http://hocketoan360.com/
    Haha http://hocketoan360.com/category/khoa-hoc-ke-toan/
    http://hocketoan360.com/category/dich-vu-ke-toan/

  3. Hayden Sinclair says:

    To fix the Download PDF on Hover issue (Office 365 users with with no control over Browser File Handling), try using the Word Preview within the PDF Result Type for your PDFs as per this post

    http://www.wictorwilen.se/sharepoint-2013-enabling-pdf-previews-with-office-web-apps-2013-march-2013-update

  4. Brian S says:

    I could be missing something here but all I get for preview is standard '

    PDF

    We didn't find any more information about this result.'

    Regards,

    B

  5. mike says:

    Thanks for this solution. One thing I noticed is the pdf icon next to the link in the search results has disappeared. Any way to get this back?

  6. augustine says:

    I tried this but the browser ends up prompting for PDF download on hover?

  7. Dan_IT says:

    Augustine: The reason why you are prompted on hover is because your web application is configured with strict "Browser File Handling". Go to Central Admin, Web Applications, <Your web app>, General Settings and set Browser File Handling to Permissive.

    Verify that you can click a PDF in a document library to open it without being prompted. If the PDF is shown in the browser when you click it, hovering will work too.

  8. brett says:

    Hi, Great tip for PDF documents in SP2013.  I did almost the same thing for SP2010 Search Results, using an iFrame on mouse-over displays the first page of the PDF.

    sharepoint2020.wordpress.com/…/display-pdf-thumbnail-preview-on-hover-in-search-results-web-part

  9. alejandra says:

    This solution works for SharePoint 2010?

  10. mike says:

    Steve,

    This works great in the search results but does not work in a Document Library preview. Is this something that can be adapted to work in the Document Library?

  11. Beth Beck says:

    If you're using Office Web Apps 2013, the March 2013 update includes capability to preview PDF files in the browser. Just another option in case you're interested.

  12. Aleksandr says:

    Btw, this product also shows previews in document libraries: http://www.harepoint.com/Products/HarePointThumbnails/Default.aspx

  13. This works great, but if running IE10 it looks like you need Adobe Reader 10 or higher installed to render the preview correctly. I had 8 and got no preview, moved to 9, no preview, updated to 10 and got the preview, same with 11.

    Dave Kuehling

    Codesigned

    http://www.codesigned.com

  14. Luke Hollinshead says:

    Hey guys, following the above instruction, I seem to have run into issues when searching for a PDF in the search. It displays 'Sorry, somethng went wrong." showing the following error message…

    Display Error: The display template had an error. You can correct it by fixing the template or by changing the display template used in either the Web Part properties or Result Types.

    Template '~sitecollection/_catalogs/masterpage/Display Templates/Search/PDF_Default.js' not found or has syntax errors. (LoadTemplate: ~sitecollection/_catalogs/masterpage/Display Templates/Search/Group_Default.js)

    Cannot set property 'innerHTML' of null (OnPostRender:

    Anyone got any ideas?

  15. Andrew Billings says:

    Luke – I actually just helped someone with this today. You need to make sure you publish the PDF_Default.html page.

  16. Mike M says:

    Seems I have recently encountered the same "something went wrong error" – however it is only for non-admins.  Is there a security consideration?

  17. Monica says:

    I have received the same error message "The display template had an error" when I test site permissions. Anything lower than designer recieves the error.

  18. m88 says:

    m88 :http://m88en.com/new-online-casino-deposit-bonus-codes-2015/
    M88.com offer online sports games Asia, Sports Betting Asia, Sports Betting Sites Asia.

    m88asia : http://m88en.net/m88-bet-mansion88-online-casino-online/
    Link to M88BET phone: m88en.com. – Register and Open Betting Account and Membership M88BET.

    m88bet :
    http://www.linkm88vip.com/2014/12/m88-asia-main-home-register-online-free.html
    MANSION88 the house is one of the largest and most prestigious. Appeared quite early in the Asian market, the so-MANSION88 currently attracts more players.

    link m88 :
    http://m88wiki.com/google-chrome-bookmarks-fastest-m88-link/
    Home the M88 is the official sponsor of the football club in the Premier League
    Wish you happy with the new M88
    m88 casino online : http://m88free.com/register-m88-football-betting/