Open PDF files in a maximized dialog

I got a request from Brett Anderson regarding a solution for opening PDF files in a maximized dialog window in SharePoint 2010. This code will most likely work in SharePoint 2013, but it has not been tested.

Please note that “Browser file handling” must be set to “Permissive” under “Web application general settings” in SharePoint Central Administration.

This is the code we ended up with after some back and forth:

<!-- Put this code below the list view web part -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$("a[href$='.pdf']").each(function(){
	$(this).removeAttr("onclick").attr("href","javascript:openPDFinDlg(\""+this.href+"\")");	
});

function openPDFinDlg(href){
	var o;
	$("body").append("<div id='pdfTemp' style='min-height:600px;min-width:800px;height:100%;overflow:hidden'><object data='"+href+"' width='100%' height='100%' type='application/pdf' ></object></div>");
	o = {};
	o.html = $("#pdfTemp")[0];
	o.showMaximized = true;
	o.title = href.substring(href.lastIndexOf("/")+1);
	o.dialogReturnValueCallback = openPDFinDlgCallback;	
	SP.UI.ModalDialog.showModalDialog(o);
}

function openPDFinDlgCallback(){
	 // do something here when the dialog closes
}
</script>

Enjoy,
Alexander

6 Comments on “Open PDF files in a maximized dialog

  1. I always like taking your code and making it work in other uses. I added this to a web part page, where I had hyperlinks, some were PDF. Initially I could not get it to work, so I thought. It was actually appending the div at the end of the document. once I realized this I just set a position on the div and there it was. now I have no way of closing the dialog. How can I do this? do I need to add a button? how do I close the dialog?

    thanks A

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.