在jQuery弹出窗口中显示PDF文件

Question

我想知道有没有人知道如何使用Fancybox/Lightbox等工具在jQuery中显示PDF文件？ 我已经尝试过了，但毫无成功！

- green_arrow

---

如果你问我，这很烦人。有些人已经配置他们的浏览器下载PDF并在外部查看器中打开它们。对于他们来说，灯箱只会显示一个空的iframe。此外，复数形式是“PDFs”，而不是“PDF's”。 - ThiefMaster

“我尝试过但没有成功！” - 你尝试了什么？你能展示一些代码并描述期望的行为和观察到的行为吗？ - David

Answer 1

对于fancybox v1.3.x，使用以下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文件。

请注意，在标签中设置了height="99%"。如果您使用HTML5 DCTYPE，则可以避免出现双重垂直滚动条。这是因为HTML5初始化边距的方式。

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

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

从脚本和content选项后面的最后一个逗号开始。

另外，将autoDimensions一词更改为autoSize。

- JFK