1

私は何をやっている ：

私は自分のWebサイトとホームページでPDFリーダーを開発しています。レンダリングされた電子書籍のカバー写真がいくつかあり、ユーザーが特定の電子書籍をクリックすると、jquery uiダイアログが表示され、pdfobjectライブラリを使用してPDFをレンダリングします。 。

私が達成したこと：

電子書籍のアイコンをクリックすると、ダイアログで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;
    });
});

オープナーは私がアイコンに与えるIDであり、pdfpromptは単純です<div>

例 ：

これが起こっていることです

charlietflのソリューション（jsFiddle）を試した後：ここに画像の説明を入力してください

これを達成するために私を助けてくれませんか、ありがとう

4

2 に答える 2

2

潜在的な問題の 1 つは、非表示の要素に次元がないことです。これにより、非表示の div で処理される Google マップなどの問題が発生します。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

表示されたPDFのサイズを自動的に変更するGoogleドキュメントビューアを使用してみてください（demo）

<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 に答える