HTML5 File API を使用してドキュメント (.doc/.docx/.pdf) をアップロードしています。サーバーにアップロードする前に、そのドキュメントのプレビューを表示したいと思います。クライアント側でそのようなことを行う方法はありますか?
PS Google Docs Viewer は、インターネットからドキュメントにアクセスできる必要があるため、問題があります。
HTML5 File API を使用してドキュメント (.doc/.docx/.pdf) をアップロードしています。サーバーにアップロードする前に、そのドキュメントのプレビューを表示したいと思います。クライアント側でそのようなことを行う方法はありますか?
PS Google Docs Viewer は、インターネットからドキュメントにアクセスできる必要があるため、問題があります。
少し例を作成しようとしましたが、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"/>
<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>
いいえ、できません。
ブラウザが表示すべきではないデータファイルを表示する必要があります。データ ファイルを表示するための Office または PDF ビューアー (OK、許可されています。PDF ssem は現在ブラウザー内にあります...) があります。
ブラウザーでプレビューを表示する場合は、最初にアップロードして、「プレビュー用」ディレクトリなどに保存する必要があります。OK の場合は最終的な移動先に移動し、そうでない場合は削除します。
File APIを使用すると、ファイルからデータを読み取ることができますが、その場合、データを解析してレンダリングするという問題が発生します。Mozilla はJavaScript PDF ビューアーをリリースしましたが、MS Office ファイルについては何も知りません。
昔は、次のようなことができました。
<object data="word.doc">You do not have Word installed on your machine</object>
これがまだサポートされているかどうかはわかりませんが、サポートされている場合は、JS を使用してそのオブジェクトをページに挿入し、プレビューすることができます。
次の 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