Comment rendre un document Word (.doc, .docx) dans le navigateur en utilisant 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 coincé en train d'essayer d'afficher un document Word dans le navigateur. Je souhaite afficher un document Word dans Firefox, IE7 +, Chrome, etc.
Quelqu'un peut-il aider? Je reçois toujours la boîte de dialogue "Ouvrir/Enregistrer" tout en affichant le document Word dans le navigateur. Je veux implémenter cette fonctionnalité en utilisant JavaScript.
Aucun navigateur ne dispose actuellement du code nécessaire pour restituer les documents Word et, à ma connaissance, aucune bibliothèque côté client n'existe actuellement pour les restituer.
Toutefois, si vous n'avez besoin que d'afficher le document Word, mais que vous n'avez pas besoin de le modifier, vous pouvez utiliser l'afficheur de Google Documents via un <iframe> pour afficher un .doc.docx hébergé à distance.
<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 avec fancybox ".
Exemple:
Cependant, si vous préférez un support natif, dans la plupart des navigateurs, sinon tous, je vous recommande de réenregistrer le .doc/.docx en tant que fichier PDF. Ceux-ci peuvent également être restitués indépendamment à l'aide de PDF.js par Mozilla.
_/ Modifier:
Un grand merci à fatbotdesigns pour avoir posté 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>
Comme il a été souligné par lightswitch05 , il convient de garder à l’esprit qu’il faudra télécharger votre document sur un serveur tiers. Si cela est inacceptable, cette méthode d'affichage ne convient pas.
Exemples en direct:
Les réponses de Brandon et de fatbotdesigns sont toutes les deux correctes, mais après avoir implémenté l'aperçu des documents Google, nous avons trouvé plusieurs fichiers .docx qui ne pouvaient pas être gérés par Google. Basculé vers l'aperçu MS Office Online et fonctionne comme un charme.
Ma recommandation serait d'utiliser l'URL de prévisualisation 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 capables de gérer les conversions HTML côté client (pas les .doc) (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, les listes, les tableaux, les notes de fin, les notes de bas de page, les images et les zones de texte.
https://www.npmjs.com/package/docx2html - Convertit les documents DOCX en HTML dans le navigateur ou dans le noeud nodejs
https://github.com/artburkart/docx2html - fonctionne apparemment dans le navigateur
Remarque: Si vous recherchez le meilleur moyen de convertir un fichier doc/docx côté client, la réponse est probablement ne le faites pas. 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.
Les documents natifs (dans lesquels j'ai un intérêt) crée un visualiseur (et un éditeur) spécifiquement pour les documents Word (formats binaires hérités .doc et docx modernes). Cela se fait sans conversion avec perte en HTML. Il y a une démo en ligne où vous pouvez essayer votre propre document.
ViewerJS est utile pour visualiser/intégrer le format openoffice tel que odt, odp, ods et aussi pdf.
Pour intégrer openoffice/document 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
Je pense que j'ai une idée… .. Cela a été un problème pour moi aussi et je n'arrive toujours pas à l'afficher dans Chrome.
Enregistrez le document (name.docx) dans Word sous forme de page Web à fichier unique (name.mht) Dans votre utilisation html
<iframe src= "name.mht" width="100%" height="800"> </iframe>
Modifiez les hauteurs et les largeurs comme bon vous semble.
Si vous souhaitez prétraiter vos fichiers DOCX plutôt que d'attendre l'exécution, vous pouvez d'abord les convertir en HTML à l'aide d'une API de conversion de fichier telle que Zamzar . Vous pouvez utiliser l'API pour convertir par programmation de DOCX à HMTL, enregistrer la sortie sur votre serveur, puis transmettre ce code HTML à vos utilisateurs finaux.
La conversion est assez facile:
curl https://api.zamzar.com/v1/jobs \
-u API_KEY: \
-X POST \
-F "[email protected]" \
-F "target_format=html5"
Cela supprimerait toutes les dépendances d'exécution sur les services de Google et de Microsoft (par exemple, si elles étaient en panne ou si leur taux était limité).
Il présente également l’avantage que vous pouvez étendre à autres types de fichiers si vous le souhaitez (PPTX, XLS, DOC, etc.)