在jQuery PopUp中显示PDF [英] Displaying PDF's in jQuery PopUp

问题描述

我想知道是否有人知道如何使用Fancybox/Lightbox等在jQuery中显示PDF?我尝试没有成功！

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

推荐答案

对于fancybox v1.3.x，具有以下HTML:

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

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

使用此脚本:

$(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

当然，请确保先加载jQuery和fancybox js和css文件

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

请注意，我在<embed>标记内设置了height ="99％".如果您使用HTML5 DCTYPE，它将避免使用垂直滚动条.这是因为HTML5初始化边距的方式.

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.

对于fancybox v2.x :如果您使用的是fancybox v2.x，则可以使用相同的脚本，但是不需要onClosed选项，因此请删除

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();
}

来自脚本和content选项之后的最后一个试用逗号.

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

也也将autoDimensions词更改为autoSize.

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