2013-04-06 184 views
10

iPad Safariブラウザは何らかの理由で埋め込みPDFをうまく処理できません。 PDFはスタンドアローンで起動したときに単独で表示されますが、オブジェクトタグでは表示されません。問題は、スクロールしないことです。埋め込みPDFをiPadでスクロール可能にする

私はmozillaとchromeをうまくスクロールする埋め込みPDFを持つjqueryページを持っていますが、Safari(iPad)ではPDFは最初のページに貼り付けられたままでスクロールできません。問題は、iPadブラウザでこの作業を行うにはどうすればいいですか?

類似の質問が投稿されましたMaking embedded PDF scrollable in iPadしかし、答えはあまり良くありません。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>PDF frame scrolling test</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <style> 
     #container { overflow: auto; -webkit-overflow-scrolling: touch; height: 500px; } 
     object { width: 500px; height: 10000px } 
    </style> 
    </head> 
    <body> 
    <div id="container"> 
     <object id="obj" data="my.pdf" >object can't be rendered</object> 
    </div> 
    </body> 
</html> 

これはハードコーディングなしで行わ取得する方法を:彼らは小さなドキュメントのために空白の多くを作成し、潜在的に非常に大規模なドキュメントのために動作しません10000pxの高さを、使用して不正行為をしています狂気の高さ?

+0

はアプリに埋め込まれたPDFですかそれは、サーバから見ましたか?つまり、PDFをUIWebViewまたはMobile Safariに表示する必要があるのでしょうか? – epatel

+0

PDFはサーバー上にあります。最終的に、PDFはサーバー上で動的に更新され、アプリケーションはどのような形状やサイズであってもそれらを表示します。アプリの残りはjqueryで行われ、ipadはユーザーの好みです。今はPDFが新しいブラウザウィンドウに表示されますが、それは機能するためですが、理想的には、ページに埋め込んでおく必要があります。 – chrisnova10

+0

ネイティブアプリはありませんか? – epatel

答えて

15

私はこの問題を解決するために何年も努力してきました。私はしばらくそれを探している人を救おうとします:この問題には解決策はありません。 SafariがPDFレンダリングを処理する方法は、WebページにPDFを埋め込むという概念全体と矛盾しています。さらに、iPad上のすべてのブラウザでSafariレンダリングエンジンを使用する必要があるため、別のブラウザをインストールするようにユーザーに指示することさえできません。

妥当な結果をもたらすPDFを埋め込む唯一の方法は、ある種のサードパーティレンダリングユーティリティを使用することです。そこにいくつかのjQueryソリューションがありますが、私の目的では、オブジェクトまたはiframeタグにGoogleドキュメントビューアのリンクを埋め込むことが最も簡単な方法でした。これを行うのは比較的簡単です、あなたはここに簡単な指示を見つけることができます。

https://docs.google.com/a/dloweb.com/viewer

このソリューションは、良好な表示レンダリングとシンプルなページネーションとズームコントロールが含まれています。 iframeタグまたはobjectタグに埋め込む場合は、& embedded = trueオプションを指定する必要があります。そうしないと、動作しません。ビューアには公開されているアクセス可能なURLが必要です。私のようなセキュリティ上の問題がある場合は、単一の使用トークンからドキュメントを提供するWebサービスを作成する必要があります。

他のいくつかのオプションを示しています良いWebページは、あなたが少しより堅牢な何かを探してする必要がありますあります:

http://www.jqueryrain.com/2012/09/best-jquery-pdf-viewer-plugin-examples/

+0

jqueryrainのリンクは、私のために怖い見た目の「あなたは無料のiPhoneで勝った」ページにリダイレクトされました。ページの内容が他の場所で利用できるのだろうか? –

+0

私はそれを見ます。私は私のポストに有効期限を入れておくべきだったと思う。 (警告:リンクは、掲載後4年を経過しても動作保証されていません)...またはそのようなものです。 8^P – MSD

+1

私は、人々が私たちがリンクを投稿するのではなく内容を要約すべきであるとコメントし続けている理由だと思います。 –

0

あなたが狂った何かにオブジェクトの高さを設定する必要はありません、コンテナ要素と同じ高さに設定してください。絶望的なSafariレンダリングオブジェクトを使用してスクロールするには、の2本の指(上/下と左/右の両方)を使用する必要があります。

私も自分のコンテナ要素に設定し、この性質を持っている:私は達成できなかった

overflow: scroll; 
-webkit-box-pack: center; 
-webkit-box-align: center; 
display: -webkit-box; 

何かが、それは、コンテナの上に幅を埋めることでしたが、少なくとも、あなたは、ドキュメントをナビゲートすることができます。

2

MSDの回答は非常に正確です。 私はオブジェクト、埋め込み要素などを使用するように提案されているライブラリのいくつかから、さまざまな方法でこれをやろうとしています。

いずれにせよ、私のためにスクロールしません(iPad Air 2とAir 1以上iOS 8の場合)。または、過度に引き伸ばされた文字でスクロールするか、短い1-2ページのドキュメントでのみ動作します。

私が最も効率的に直接ファイルにアクセスするためのユーザーエージェントを介してiPadユーザーへのリンクを提供していソリューション、彼らはタブでそれを見ると、それを介してきれいにスクロールすることができるようになります。 それは埋め込まれていませんが、私の現在のニーズに見合った最も効率的で実用的な解決策です。

は、私はそれが誰かが

+0

これは解決策ではありませんが、回避策は – Akash

8

PDF.jsは正しい選択することができ、同じこと掘り下げることができます願っています。それは私たちのために完全に動作します。

https://mozilla.github.io/pdf.js/からダウンロードして、あなたのウェブサイトに配置してください。そして、デモはここで見つけることができるのiframe

<iframe src="/web/viewer.html?file=PATH_TO_MY_FILE.PDF"></iframe> 

に含めることができ

https://mozilla.github.io/pdf.js/web/viewer.html

よろしく

+0

です。このメソッドを使用すると、正常に機能し、実装が簡単になりました。 – cjohansson

関連する問題