web-dev-qa-db-ja.com

JavaScriptを使用してブラウザにWord文書（.doc、.docx）をレンダリングする方法を教えてください。

"Open/Save"ダイアログの代わりにPDFファイルをブラウザに表示するコードを作成しました。今、私はブラウザでWord文書を表示しようとして立ち往生しています。 Firefox、IE7 +、ChromeなどでWord文書を表示したい.

誰か助けてもらえますか？ブラウザにWord文書を表示している間、私はいつも "Open/Save"ダイアログを表示しています。 JavaScriptを使ってこの機能を実装したいです。

javascriptbrowserms-word
108
Pankaj

現在、Word文書をレンダリングするために必要なコードを持っているブラウザはありません。また、私が知る限り、それらをレンダリングするためのクライアントサイドライブラリもありません。

ただし、Word文書を表示するだけで編集は不要な場合は、<iframe>を介してGoogle DocumentsのViewerを使用して、リモートでホストされている.doc/.docxを表示できます。

<iframe src="https://docs.google.com/gview?url=http://remote.url.tld/path/to/document.doc&embedded=true"></iframe>

解決方法は、「 fancyboxを使ってWord文書を表示する方法 」から修正されました。

例：

JSFiddle

ただし、ネイティブサポートが必要な場合は、ほとんどのブラウザではなくてもほとんどのブラウザで、.doc/.docxをPDFファイルとして保存し直すことをお勧めします。 MozillaによるPDF.js 。

編集：

コメントにMicrosoft Office 365ビューアーを投稿してくれた fatbotdesigns に感謝します。

<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=http://remote.url.tld/path/to/document.doc' width='1366px' height='623px' frameborder='0'>This is an embedded <a target='_blank' href='http://office.com'>Microsoft Office</a> document, powered by <a target='_blank' href='http://office.com/webapps'>Office Online</a>.</iframe>

lightswitch05 で指摘されているように、覚えておくべきもう1つの重要な注意点は、これがあなたのドキュメントをサードパーティのサーバーにアップロードするということです。これが受け入れられない場合、この表示方法は適切な方法ではありません。

ライブ例：

Googleドキュメントビューア

Microsoft Office Viewer

182
Brandon Anzaldi

Brandonとfatbotdesignsによる答えはどちらも正しいですが、Googleのドキュメントプレビューを実装したところ、Googleでは処理できない複数の.docxファイルが見つかりました。 MS Office Onlineのプレビューに切り替えられ、魅力的に機能します。

私のお勧めは、GoogleよりもMS OfficeのプレビューURLを使用することです。

https://view.officeapps.live.com/op/embed.aspx?src=http://remote.url.tld/path/to/document.doc'
24
kernelmann

クライアント側のHTML変換に.docx（.docではない）を処理できるjsライブラリがいくつかあります（順不同）。

注意：クライアントサイドでdoc/docxファイルを変換する最善の方法を探しているなら、おそらく答えはしないでください。あなたが本当にそれをする必要があるなら、それからそれをサーバサイドで、すなわち、ヘッドレスモードで libreofficeを使って 、 Apache- poi（Java） 、 pandoc 、または他のどんなライブラリでもあなたに最適です。

7
ccpizza

ViewerJS はodt、odp、odsそしてpdfのようなopenofficeフォーマットを表示/埋め込むのに役立ちます。

Openoffice/pdf文書埋め込み用

<iframe src = "/ViewerJS/#../demo/ohm2013.odp" width='700' height='550' allowfullscreen webkitallowfullscreen></iframe>

/ViewerJS/はViewerJSのパスです。

#../demo/ohm2013は埋め込むファイルのパスです。

2
NaveenDA

ネイティブドキュメント（私が興味を持っている）は、Wordドキュメント（従来のバイナリ.docと最新のdocxフォーマットの両方）専用のビューア（およびエディタ）を作成します。それは損失のないHTMLへの変換なしでそうします。あなたがあなた自身の文書を試すことができるオンラインのデモがあります。

1
JasonPlutext

私は考えがあると思います。これは私のナットもやっています、そして私はまだそれをChromeで表示させるのに苦労しています。

単一ファイルのWebページ（name.mht）としてWordで文書（name.docx）を保存する

<iframe src= "name.mht" width="100%" height="800"> </iframe>

あなたが合うように高さと幅を変えてください。

0
Cai Esson

実行時まで待つのではなく、DOCXファイルを前処理したい場合は、 Zamzar のようなファイル変換APIを使用して、まずそれらをHTMLに変換できます。 。 APIを使用してDOCXからHMTLにプログラムで変換し、その出力をサーバーに保存してから、そのHTMLをエンドユーザーに提供することができます。

変換はとても簡単です。

curl https://api.zamzar.com/v1/jobs \
-u API_KEY: \
-X POST \
-F "[email protected]" \
-F "target_format=html5"

これにより、GoogleとMicrosoftのサービスへの実行時の依存関係が解消されます（たとえば、それらが停止していたり​​、レート制限を受けていた場合など）。

それはあなたが望むなら 他のファイルタイプ にも拡張できるという利点もあります（PPTX、XLS、DOC etc）

0
Chris Whyley