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.

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

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

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 "

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.

Tagged: Javascript