花式盒子显示 PDF

Question

嗨，我正在尝试显示带有花哨框的PDF，但我不能。

我有这个代码：

$(".fancybox").fancybox({
'frameWidth': 100,
'frameHeight':495,
'overlayShow':true,
'hideOnContentClick':false,
'type':'iframe'
})

和

<a class="fancybox" href="/symfony2/web/app.php/pdf/2"> show pdf</a>

但向我展示了生成 pdf 的方式：

http://www.subirimagenes.com/imagen-pantallazo-8110661.html

有谁知道如何解决问题以正确显示Facybox？ 问候。

Answer 1

你能解释一下什么对你不起作用吗？它应该有效 - http://jsfiddle.net/zqJFp/

<a class="fancybox" href="http://samplepdf.com/sample.pdf">Open pdf</a>
​$(".fancybox").fancybox({
width  : 600,
height : 300,
type   :'iframe'
});​

Answer 2

我希望这对我有用！

<a class="btn btn-info btn-sm btn-hover gallerypdf" data-fancybox-type="iframe" href="../../assets/img/exp_2493_parte-3.pdf"><span class="glyphicon glyphicon-eye-open"></span></a>

$(document).ready(function() {
$(".gallerypdf").fancybox({
openEffect: 'elastic',
closeEffect: 'elastic',
autoSize: true,
type: 'iframe',
iframe: {
preload: false // fixes issue with iframe and IE
}
});
});

Answer 3

Fancybox试图通过查看文件扩展名(gif，jpg，pdf等)来根据给定的URL自动检测内容类型。在您的情况下，由于您的 url 不以".pdf"结尾，因此您无法检测到它，因此您必须手动设置类型。

接受的解决方案很好，因为这可以在初始化花式框时使用type选项来完成，但是如果您有混合的内容(图像和 pdf 在一起)，它将不起作用。在这些情况下，您可以使用data-type内联属性并标记每个单独的条目。

例如，您可以执行以下操作：

<a href="getimages.php?id=123" data-type="image">
Show image
</a>
<a href="getpdf.php?id=123" data-type="iframe">
Show pdf
</a>
<a href="getajax.php?id=123" data-type="ajax" data-src="my/path/to/ajax/">
Show ajax content
</a>

。等等。