JavaScriptを使用してブラウザーでWord文書（.doc、.docx）をレンダリングするにはどうすればよいですか？

「開く/保存」ダイアログの代わりにブラウザでPDFファイルを表示するコードを正常に実行しました。今、私はブラウザでWord文書を表示しようとしています。Firefox、IE7 +、ChromeなどでWord文書を表示したい

誰か助けてもらえますか？ブラウザでWordドキュメントを表示しているときに、常に[開く/保存]ダイアログが表示されます。JavaScriptを使用してこの機能を実装したいと思います。

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

ただし、Word文書を表示するだけで編集する必要がない場合は、Googleドキュメントのビューアを使用<iframe>して、リモートでホストされている.doc/ を表示できます.docx。

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

「fancyboxを使用してワードドキュメントを表示する方法」からのソリューション。

例：

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ビューア

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' 

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

• https://github.com/lalalic/docx2html — docxからhtml、ほとんどの要素がサポートされています

• https://github.com/mwilliamson/mammoth.js —見出し、リスト、表、文末脚注、脚注、画像、テキストボックスをサポートします

• https://www.npmjs.com/package/docx2html —ブラウザまたはnodejsでDOCXドキュメントをHTMLに変換します

• https://github.com/artburkart/docx2html —どうやら、ブラウザで動作します

^{注：クライアント側でdoc / docxファイルを変換する最良の方法を探している場合、おそらく答えはそれを行わないことです。あなたが本当にそれをする必要がある場合は、サーバー側で実行してください。つまり、ヘッドレスモードのlibreoffice、apache-poi（java）、pandoc、またはその他のライブラリが最適です。}

アイデアがあると思います。これもうまく機能していて、Chromeで表示するのにまだ問題があります。

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

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

必要に応じて高さと幅を変更します。

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 埋め込みたいファイルのパスです

ネイティブドキュメント（私が興味を持っている）は、Wordドキュメント（レガシーバイナリ.doc形式と最新のdocx形式の両方）専用のビューアー（およびエディター）を作成します。HTMLへの損失のない変換なしでそれを行います。開始方法は次のとおりですhttps://github.com/NativeDocuments/nd-WordFileEditor/blob/master/README.md

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

変換はかなり簡単です：

curl https://api.zamzar.com/v1/jobs \
-u API_KEY: \
-X POST \
-F "source_file=@my.docx" \
-F "target_format=html5"

これにより、GoogleおよびMicrosoftのサービスに対する実行時の依存関係がすべて削除されます（たとえば、サービスがダウンしているか、サービスによってレートが制限されていた場合）。

また、必要に応じて他のファイルタイプ（PPTX、XLS、DOCなど）に拡張できるという利点もあります。