23

HTML5 File API を使用してドキュメント (.doc/.docx/.pdf) をアップロードしています。サーバーにアップロードする前に、そのドキュメントのプレビューを表示したいと思います。クライアント側でそのようなことを行う方法はありますか?

PS Google Docs Viewer は、インターネットからドキュメントにアクセスできる必要があるため、問題があります。

4

8 に答える 8

30

少し例を作成しようとしましたが、PDF ファイルをアップロードする前に PDF プレビューが表示されます。

<!DOCTYPE html>
  <html lang="en">
    <head>
        <title>JavaScript PDF Viewer Demo</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            function PreviewImage() {
                pdffile=document.getElementById("uploadPDF").files[0];
                pdffile_url=URL.createObjectURL(pdffile);
                $('#viewer').attr('src',pdffile_url);
            }
        </script>
    </head>
    <body>
        <input id="uploadPDF" type="file" name="myPDF"/>&nbsp;
        <input type="button" value="Preview" onclick="PreviewImage();" />

        <div style="clear:both">
           <iframe id="viewer" frameborder="0" scrolling="no" width="400" height="600"></iframe>
        </div>
    </body> 
</html>
于 2014-01-09T10:37:20.173 に答える
4

いいえ、できません。

ブラウザが表示すべきではないデータファイルを表示する必要があります。データ ファイルを表示するための Office または PDF ビューアー (OK、許可されています。PDF ssem は現在ブラウザー内にあります...) があります。

ブラウザーでプレビューを表示する場合は、最初にアップロードして、「プレビュー用」ディレクトリなどに保存する必要があります。OK の場合は最終的な移動先に移動し、そうでない場合は削除します。

于 2013-06-27T13:39:48.703 に答える
3

File APIを使用すると、ファイルからデータを読み取ることができますが、その場合、データを解析してレンダリングするという問題が発生します。Mozilla はJavaScript PDF ビューアーをリリースしましたが、MS Office ファイルについては何も知りません。

于 2013-06-27T13:42:24.763 に答える
2

昔は、次のようなことができました。

<object data="word.doc">You do not have Word installed on your machine</object>

これがまだサポートされているかどうかはわかりませんが、サポートされている場合は、JS を使用してそのオブジェクトをページに挿入し、プレビューすることができます。

于 2013-06-27T13:36:52.600 に答える
0

次の Web コンポーネントを使用して実行できます: https://avipunes.github.io/file-viewer/

内部のこの Web コンポーネントは、いくつかの Microsoft 埋め込みエンドポイントを使用します: https://view.officeapps.live.com/op/embed.aspx?src=${fileURI}

ここで例を見ることができます: https://view.officeapps.live.com/op/embed.aspx?src=https://file-examples-com.github.io/uploads/2017/02/file_example_XLS_10.xls

于 2020-10-18T09:35:27.383 に答える