在 jQuery PopUp 中显示 PDF [英] 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!

解决方案

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 .

这篇关于在 jQuery PopUp 中显示 PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！