web-dev-qa-db-ja.com

モバイルブラウザにPDF

以下のコードは、必要なものに対する完璧なソリューションです。これは、基本的にJPG、GIF、PNG、またはPDFファイルをWebページに埋め込むことです。PCブラウザーで完全に機能しますが、ただし、ページの重要な要件は、ターゲットユーザーのために、モバイルブラウザで互換性を持たせることです。

<iframe src="uploads/test1.pdf" width="auto" height="auto"> </iframe>

画像ファイルは正常に機能しますが、PDFファイルはモバイルブラウザで個別に開かれ、Webページにインラインで埋め込まれません。これに対する代替ソリューションまたは実装は何でしょうか。

htmlpdfiframemobileembed
4
Lane

PDFJライブラリを使用できます。 JSだけを使用して、PDFファイルをレンダリングできます。どうぞ、ここをチェックしてください： https://mozilla.github.io/pdf.js/

7
ivash

簡単なオプションの1つは、object要素がフォールバックを提供することです。これにより、次のことができます。

<object data='some.pdf'>
    <p>Oops! Your browser doesn't support PDFs!</p>
    <p><a href="some.pdf">Download Instead</a></p>
</object>

次に、モバイルブラウザがアイテムを取得できない場合は、これが表示されるだけで、準備が整います。

3
mlissner

オブジェクトタグ内でiframeタグとともにオブジェクトタグを使用します。

オブジェクトデータは、タイプを変更することでpdfまたはpngファイルにすることができ、どこにでも保存したい任意のリンクを使用できますが、Iフレームはモバイル用にロードされるフレームであり、GoogleドライブまたはGoogleドキュメントからのリンクである必要があります。また、ファイルを公開して共有できるようにする必要があります。そうしないと、他のユーザーがファイルを表示できなくなります。

私はコードを共有しますが、このサイトにはコードに関するいくつかのごみルールがあり、それらを共有することはできません。そのため、実際に開発者の助けを必要としているより良いサイトを表示して、オブジェクトタグとiframeタグがどのように機能するかをGoogleに任せます。

楽しんでね！

0
Treyarder

私は同じ問題に遭遇しました。新しい開発者として、私はモバイルブラウザがiframeにPDFファイルを埋め込むのに問題があることに気づいていませんでした。私は今...笑

モバイルブラウザに新しいウィンドウでのPNGファイルの表示に問題がないことに気付いたとき、これを機能させるためにリソースを積み上げました。それで、私の無限の知恵で、Gimp2.0でPDFファイルを開き、PNGファイルとしてエクスポートしました。次に、ユーザーがクリックするためのボタンを作成しました。これで、試す代わりにグラフィックが開きます。 PDFを埋め込むには次のようになります。

<input class="AG" id="UnityBtn" type="button" value="Unity" onclick="location.href='../Meeting_Info/Unity.png'"  />

これがあなたにとって可能かどうかはわかりませんが、私にとってはうまくいきました。

0
Mike

私が見つけた、PDFを埋め込むことができる唯一の方法は、Googleドライブを使用し、ファイルを開いたらメニューボタンを選択し、[埋め込みコードを取得]を選択することです。使用できるのは、GoogleドライブまたはGoogleドキュメントのリファレンスのみです。また、パブリック共有をオンにする必要があります。そうしないと、他の人が許可なくそれを表示できなくなります。

0
Treyarder