1

我在做什么 ：

我正在我的网站和主页上开发一个 pdf 阅读器，我有许多电子书封面照片呈现，当用户点击特定电子书时，会出现一个 jquery ui 对话框，我使用pdfobject 库呈现 pdf .

我取得了什么：

点击 e-book 的图标，可以在对话框中渲染 pdf 对象。

问题 ：

显示看起来很糟糕。在 pdf 嵌入对象中有滚动条，并且 jquery 对话框有滚动条（垂直和水平）。

我想要的是 ：

我的 jquery 对话框的宽度 = 600 和高度 = 500 ，当我第一次打开对话框时，应该只有 1 个垂直滚动条，pdf 的第一页应该完全适合我的对话框默认尺寸（600 X 500），无论是多少它的原始尺寸。如果 pdf 只有 1 页，则不应有滚动条（除非用户单击放大）

Javascript代码：

$(function() {
    $( "#pdfPrompt" ).dialog({
        autoOpen: false,
        show: "blind",
        hide: "explode",
        width:600,
        height:500,
        resizable : false
    });

    $( "#opener" ).click(function() {
        $( "#pdfPrompt" ).dialog( "open" );
            var myPDF = new PDFObject({ url: "sample.pdf" }).embed('renderer');

        return false;
    });
});

opener 只是我给 icon 的 id，而 pdfprompt 是一个简单的<div>

例子 ：

这就是正在发生的事情

在尝试了 charlietfl 的解决方案（jsFiddle）之后：在此处输入图像描述

你能帮我实现这个吗，谢谢

4

2 回答 2

2

一个潜在的问题是隐藏元素没有维度。这会导致问题，例如在隐藏的 div 中处理谷歌地图。pdf 查看器脚本可能需要获取容器的尺寸。

show出于这个原因删除动画。

您可能需要等到对话框打开才能将 pdf 放入对话框中。

$( "#pdfPrompt" ).dialog({
    autoOpen: false,
   open:function(){
        /* code here to render pdf*/
    },
    hide: "explode",     
    width:600,
    height:500,
    resizable : false
});
于 2013-01-06T17:20:55.777 回答
0

您可以尝试使用 google docs 查看器，它会自动调整查看的 pdf 的大小（演示）

<iframe src="http://docs.google.com/gview?url=http://samplepdf.com/sample.pdf&embedded=true" style="width:100%; height:100%;" frameborder="0"></iframe>
于 2013-01-06T16:52:32.993 回答