Displaying PDF's in jQuery PopUp

问题

I was wondering if anyone knows how to display PDF's in jQuery using Fancybox/Lightbox, etc? I have tried with no success!

回答1:

For fancybox v1.3.x, having this HTML:

<a class="pdf" href="sample.pdf">open pdf file</a>

use this script:

$(document).ready(function() {
 $(".pdf").click(function() {
  $.fancybox({
   'width': '70%', // or whatever
   'height': '90%',
   'autoDimensions': false,
   'content': '<embed src="'+this.href+'#nameddest=self&page=1&view=FitH,0&zoom=80,0,0" type="application/pdf" height="99%" width="100%" />',
   'onClosed': function() {
     $("#fancybox-inner").empty();
   }
  });
  return false;
 }); // pdf 
}); // ready

Of course, be sure you load jQuery and fancybox js and css files first

Please notice that I set height="99%" within the <embed> tag. If you use HTML5 DCTYPE, it will avoid a double vertical scroll bar. This is because the way HTML5 initializes margins.

For fancybox v2.x: if you are using fancybox v2.x you may use the same script but you don't need the onClosed option, so remove

'onClosed': function() {
 $("#fancybox-inner").empty();
}

from the script and the last trialing comma after the content option.

Also change the autoDimensions word for autoSize .

来源：https://stackoverflow.com/questions/8803927/displaying-pdfs-in-jquery-popup