Comment puis-je rendre un document Word (.doc.,docx) dans le navigateur en utilisant JavaScript?
j'ai réussi à faire du code pour afficher un fichier PDF dans le navigateur au lieu de la boîte de dialogue" Ouvrir/Enregistrer". Maintenant, je suis coincé à essayer d'afficher un document Word dans le navigateur. Je veux afficher un document Word dans Firefox, IE7+, Chrome etc.
est-ce que quelqu'un peut aider? Je reçois toujours le dialogue" Ouvrir/Enregistrer " tout en affichant le mot doc dans le navigateur. Je veux implémenter cette fonctionnalité en utilisant JavaScript.
6 réponses
aucun navigateur n'a actuellement le code nécessaire pour rendre des documents Word, et pour autant que je sache, il n'existe pas non plus de bibliothèques côté client pour les rendre.
cependant, si vous n'avez besoin que d'afficher le document Word, mais que vous n'avez pas besoin de le modifier, vous pouvez utiliser le visualiseur de documents Google via un <iframe>
pour afficher un .doc
/ .docx
hébergé à distance .
<iframe src="http://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 à l'aide de fancybox ".
exemple:
cependant, si vous préférez avoir un support natif, dans la plupart, sinon tous les navigateurs, je vous recommande de resaver le .doc
/ .docx
comme fichier PDF ceux-ci peuvent aussi être rendus indépendamment en utilisant PDF.js de Mozilla.
Edit:
grand merci à fatbotdesigns pour avoir posté le Microsoft Office 365 viewer 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 souligné par lightswitch05 , est que cela va télécharger votre document sur un serveur tiers. Si cela est inacceptable, alors cette méthode d'affichage n'est pas la bonne.
Exemples Vivants:
les réponses de Brandon et fatbotdesigns sont toutes deux correctes, mais après avoir mis en œuvre L'aperçu de Google docs, nous avons trouvé multiple .des fichiers docx qui ne pouvaient pas être traités par Google. Commuté à la prévisualisation en ligne MS Office et fonctionne comme un charme.
ma recommandation serait d'utiliser L'URL de prévisualisation de MS Office sur 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) à côté du client de conversion html (dans aucun ordre particulier):
-
https://github.com/lalalic/docx2html - docx vers html, la plupart des éléments sont pris en charge
-
https://github.com/mwilliamson/mammoth.js - supporte les en-têtes, les listes, les tableaux, les notes en fin de texte, les notes en bas de page, les images et les zones de texte
-
https://www.npmjs.com/package/docx2html - convertit les documents HTML en DOCX dans le navigateur
-
https://github.com/artburkart/docx2html - apparemment, fonctionne dans le navigateur
Note: Si vous cherchez la meilleure façon de convertir un fichier doc/docx du côté du client, alors probablement le la réponse est ne le faites pas . Si vous avez vraiment besoin de le faire, alors faites-le côté serveur, c'est-à-dire avec libreoffice en mode sans tête, apache-poi, ou n'importe quelle autre bibliothèque qui fonctionne le mieux pour vous.
ViewerJS est utile pour afficher/embed openoffice format odt,odp,ods et aussi pdf.
Pour intégrer openoffice/pdf document
<iframe src = "/ViewerJS/#../demo/ohm2013.odp" width='700' height='550' allowfullscreen webkitallowfullscreen></iframe>
/ViewerJS/
est le chemin de ViewerJS
#../demo/ohm2013
est le chemin d'accès de votre fichier souhaitez intégrer
je pense que j'ai une idée. Ça m'a fait mal aussi et j'ai encore du mal à l'afficher en Chrome.
Enregistrer le document (nom.docx) en format word comme page Web à fichier unique (nom.mht) Dans votre html utiliser
<iframe src= "name.mht" width="100%" height="800"> </iframe>
modifiez les hauteurs et les largeurs comme bon vous semble.
si vous voulez pré-traiter vos fichiers DOCX, plutôt que d'attendre l'exécution, vous pouvez les convertir en HTML d'abord en utilisant une API de conversion de fichier comme Zamzar . Vous pouvez utiliser L'API pour programmer la conversion de DOCX en HMTL, enregistrer la sortie sur votre serveur et ensuite servir ce HTML jusqu'à vos utilisateurs finaux.
la Conversion est assez facile:
curl https://api.zamzar.com/v1/jobs \
-u API_KEY: \
-X POST \
-F "source_file=@my.docx" \
-F "target_format=html5"
cela supprimerait les dépendances d'exécution sur Les services de Google & Microsoft (par exemple s'ils étaient en panne, ou si vous étiez limité par eux).
il a également l'avantage que vous pourriez étendre à autres types de fichiers si vous voulez (PPTX, XLS, DOC etc)