How to create a PDF viewer in SharePoint 2010

How to Create a PDF Viewer in SharePoint 2010

Creating a PDFViewer without creating a web part in SharePoint 2010 is possible simply by using a little Javascript. The object of this article is to explain how to display different embedded PDFs in a SharePoint page and using a drop down list to change the PDF. Want to go full screen? Also doable. To begin this tutorial start by adding a Document library that contain several .pdf files.

pdfViewer1

Next, edit the current View of the Web part and display only the column name (linked to document).

pdfViewer3

Edit the filter section of the document library to filter the Name field that contains “.PDF”

pdfViewer2

Save the view.

Open any text editor and copy the Javascript below:

<!-- the dropdown list for the libray items -->
<br/>
Select a PDF to view:
<select name="PDFSelect" id="PDFSelect"
  onchange="javascript:LoadPDFtoIFRAME(PDFSelect.options[PDFSelect.selectedIndex].value)">
  <option>Jump to ...</option>
</select>
<br/><br/>


<script>
// CEWP trick from techtrainingnotes.blogspot.com! 
// techtrainingnotes.blogspot.com/2011/12/sharepoint-displaying-pdfs-from.html

var LibrarySummaryName = "Shared Documents Share a document with the team by adding it to this document library."

function LoadPDFtoIFRAME(url)
{
    var PDFcontrol1 = document.getElementById("PDFiframe");
    PDFcontrol1.src=url
    
    // to hide the toolbar and the scroll bars change the above line to:
    // PDFcontrol1.src=url + "#toolbar=0&navpanes=0&scrollbar=0";
}


//code to hide the links list and populate the select list

//Find the library and hide it
var x = document.getElementsByTagName("TABLE") // find all of the Tables 
var Library;
var i=0;
for ( i=0; i<x.length; i++ ) 
{
  if (x[i].summary == LibrarySummaryName)
  {
    //
    Library = x[i];

    //hide the links list web part (tables in tables in tables ...)
    // Note: while testing, you may want to comment out the next line
    x[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="none";
    break;
   } 
}

if (Library)
{
  //Copy all of the links from the link list to the select list
  var ToList = document.getElementById("PDFSelect");

  var links = Library.getElementsByTagName("A"); // find all of the links
  for ( i=0; i<links.length; i++ ) 
  {
    if (links[i].onfocus)
    {
      if (links[i].onfocus.toString().indexOf("OnLink(this)") > -1)
        { ToList.options[ToList.length]             = new Option(links[i].innerHTML, links[i].href); }
    }
  }
}
else
{
  alert("Library web part named '" + LibrarySummaryName + "' not found")
}
</script>

For debugging purposes, comment the line that starts with “x[i].parentNode.” (just add two slashes: “// x[i].parentNode.”)

– this line hides the library web part. Save the file and give a name like “pdfDropDown.htm” or anything similar.

Next, you need to find out the summary name of your document library. To do this, go to the page where your document library is displayed.

Right click on the white space and go to View Source to open the code window. Do a search for

“summary=” until you find the summary name of the document library. Copy the value and replace with the text in the Javascript.

var LibrarySummaryName = "MonexWorld "

pdfViewer4

Edit your iframe height and width as you see fit. Save your file and then upload it to a SharePoint site.

I like to place files like this inside Site Assets – Site Actions > View All Site Content >

Site Assets. Once you have it stored in the document library, right click on the hyperlink and select “Copy Shortcut”

Next, add a Content Editor Web Part below the document library of the PDFs. Edit the CEWP and paste in the link inside the

Content Link box. Click ‘Test link’ to make sure you are pointing to the correct file.

Save and Publish your page. You should now be able to see your dropdown list and an embedded PDF viewer in the iframe element below that.

Lastly, remove the commented slashes you added in the earlier step. This will hide document library.

Edit the CEWP and set the Chrome value to none to hide the web part’s title.

Display the first PDF in library and add a full screen button.

Open the htm file you uploaded earlier. You going to add a few lines of Jquery.

In this scenario, I wanted to first item in the PDF document library to display by default so

you can add this to your html page.


<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document).ready(function () {
         var e = document.getElementById("PDFSelect");
         var count = (e.options.length) - 1;
         var myfile = "pathname to pdf";
         myfile = myfile + e.options.length + ".pdf";
         LoadPDFtoIFRAME(myfile)
         document.aspnetForm.PDFSelect[count].selected = "1"
    });
</script>

Below the select script, add the following:

Style the button to your liking. Now we have to add the Go() function.

function Go() {
         var strUrl = document.getElementById("PDFSelect")
         var myUrl = strUrl.value;
	var  params  = 'width='+screen.availWidth;
	params += ', height='+screen.availHeight;
	params += ', top=0, left=0'
	params += ', resizable=yes';
	newwin=window.open(myUrl,'_blank', params);
    }

The end result should give you a drop down menu, a Full Screen button and a PDF Viewer embedded in an iframe.

pdfViewer5

Advertisements

Tagged:

3 thoughts on “How to create a PDF viewer in SharePoint 2010

  1. George Lo February 20, 2014 at 5:01 pm

    Hello Doug. I just stumbled across your post recently and implemented the solution in our website successfully. But I am having problems with making the first pdf in the library show up as the default. In particular, I am having problems with the following code:

    $(document).ready(function () {
    var e = document.getElementById(“PDFSelect”);
    var count = (e.options.length) – 1;
    var myfile = “http://cloud/intranet/ourfirm/library/enewsletters/”;
    myfile = myfile + “breg291” + “.pdf”;
    LoadPDFtoIFRAME(myfile)
    document.aspnetForm.e[count].selected = “1”

    I’m not a programmer but I do my best to try to understand the logic in the code. In the code above, I did some testing to confirm that a hard coded pdf will display as the default. I used “breg291” to replace the code e.options.length to confirm this. But using the original code results in page not found.

    Are you able to provide me with some guidance?

    Thanks, George

  2. John April 22, 2014 at 8:52 pm

    I could not display the first pdf as default. Could you help me with it? I changed “pathname to pdf” to document library url, but what is e.options.length? It does not get the correct pdf, it just gets the number! Thanks

  3. Noor June 16, 2014 at 8:49 am

    Reblogged this on Ask Noor and commented:
    How to create a PDF viewer in SharePoint 2010

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: