Comment rendre un document Word (.doc, .docx) dans le navigateur à l'aide de JavaScript?

J'ai réussi à coder pour afficher un fichier PDF dans le navigateur au lieu de la boîte de dialogue "Ouvrir / Enregistrer". Maintenant, je suis bloqué en essayant d'afficher un document Word dans le navigateur. Je souhaite afficher un document Word dans Firefox, IE7 +, Chrome, etc.

Quelqu'un peut-il aider? J'obtiens toujours la boîte de dialogue "Ouvrir / Enregistrer" lors de l'affichage du document Word dans le navigateur. Je souhaite implémenter cette fonctionnalité à l'aide de JavaScript.

Aucun navigateur n'a actuellement le code nécessaire pour rendre les documents Word, et pour autant que je sache, il n'y a pas non plus de bibliothèques côté client qui existent actuellement pour les rendre.

Cependant, si vous avez seulement besoin d'afficher le document Word, mais que vous n'avez pas besoin de le modifier, vous pouvez utiliser la visionneuse de Google Documents via un <iframe>pour afficher un fichier .doc/ .docx.

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

Solution adaptée de " Comment afficher un document Word en utilisant fancybox ".

Exemple:

JSFiddle

Cependant, si vous préférez avoir un support natif, dans la plupart, sinon tous les navigateurs, je vous recommande de réenregistrer le .doc/ en .docxtant que fichier PDF.Ceux- ci peuvent également être rendus indépendamment à l'aide de PDF.js par Mozilla.

Éditer:

Un grand merci à fatbotdesigns pour avoir publié la visionneuse Microsoft Office 365 dans les commentaires.

<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>

Une autre mise en garde importante à garder à l'esprit, comme indiqué par lightswitch05 , est que cela téléchargera votre document sur un serveur tiers. Si cela n'est pas acceptable, cette méthode d'affichage n'est pas la bonne marche à suivre.

Exemples en direct:

Visionneuse Google Docs

Visionneuse Microsoft Office

Les réponses de Brandon et de fatbotdesigns sont toutes deux correctes, mais après avoir implémenté l'aperçu de Google docs, nous avons trouvé plusieurs fichiers .docx qui ne pouvaient pas être gérés par Google. Passé à l'aperçu de MS Office Online et fonctionne comme un charme.

Ma recommandation serait d'utiliser l'URL de prévisualisation de MS Office sur celle de Google.

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

Il semble y avoir des bibliothèques js qui peuvent gérer .docx (pas .doc) vers la conversion html côté client (sans ordre particulier):

• https://github.com/lalalic/docx2html - docx en html, la plupart des éléments sont pris en charge

• https://github.com/mwilliamson/mammoth.js - prend en charge les en-têtes, listes, tableaux, notes de fin, notes de bas de page, images et zones de texte

• https://www.npmjs.com/package/docx2html - Convertit les documents DOCX en HTML dans le navigateur ou nodejs

• https://github.com/artburkart/docx2html - apparemment, fonctionne dans le navigateur

^{Remarque: Si vous recherchez le meilleur moyen de convertir un fichier doc / docx côté client, la réponse est probablement de ne pas le faire . Si vous avez vraiment besoin de le faire, faites-le côté serveur, c'est-à-dire avec libreoffice en mode sans tête , apache-poi (java) , pandoc ou toute autre bibliothèque qui vous convient le mieux.}

Je pense que j'ai une idée. Cela a également fait mon boulot et j'ai toujours du mal à l'afficher dans Chrome.

Enregistrer le document (nom.docx) dans Word en tant que page Web à fichier unique (nom.mht) Dans votre utilisation html

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

Modifiez les hauteurs et les largeurs comme bon vous semble.

ViewerJS est utile pour afficher / intégrer le format openoffice comme odt, odp, ods et aussi pdf.

Pour intégrer un document openoffice / pdf

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

/ViewerJS/ est le chemin de ViewerJS

#../demo/ohm2013 est le chemin de votre fichier que vous souhaitez intégrer

Native Documents (qui m'intéresse) crée une visionneuse (et un éditeur) spécifiquement pour les documents Word (à la fois les formats binaires .doc hérités et docx modernes). Il le fait sans conversion avec perte en HTML. Voici comment démarrer https://github.com/NativeDocuments/nd-WordFileEditor/blob/master/README.md

Si vous souhaitez pré-traiter vos fichiers DOCX, plutôt que d'attendre l'exécution, vous pouvez d'abord les convertir en HTML en utilisant une API de conversion de fichiers telle que Zamzar . Vous pouvez utiliser l'API pour convertir par programme de DOCX en HMTL, enregistrer la sortie sur votre serveur, puis diffuser ce code HTML à vos utilisateurs finaux.

La conversion est assez simple:

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

Cela supprimerait toutes les dépendances d'exécution sur les services de Google et Microsoft (par exemple, s'ils étaient en panne ou si vous étiez limité par eux).

Il a également l'avantage que vous pouvez étendre à d' autres types de fichiers si vous le souhaitez (PPTX, XLS, DOC, etc.)