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.

83
demandé sur Mark 2015-01-15 09:18:03

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:

JSFiddle

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:

Google Docs Viewer

Microsoft Office Viewer

139
répondu Brandon Anzaldi 2017-10-09 22:23:52

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' 
19
répondu kernelmann 2017-03-17 12:25:31

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

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.

4
répondu ccpizza 2018-06-22 22:15:21

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

1
répondu NaveenDA 2017-09-21 17:38:39

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.

0
répondu Cai Esson 2015-11-13 10:21:29

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)

0
répondu Chris Whyley 2017-11-10 11:19:40