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

146

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.

Pankaj
la source
vous pouvez utiliser syncfusion-document-editor dans react pour afficher et éditer des fichiers docx
Yusuf Mohammad

Réponses:

225

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

Brandon Anzaldi
la source
2
@Pankaj Vous n'êtes pas obligé de le télécharger sur Google Drive. Vous pouvez simplement changer le urlparamètre en l'URL complète du fichier .doc, soit hébergé sur votre serveur, soit partout où il peut être directement lié. Google Docs gère la conversion vers un format qui peut être géré par le navigateur à la volée, et ne nécessite pas de téléchargement ou de stockage sur Google Docs, mais exécute plutôt une demande côté serveur pour récupérer le fichier.
Brandon Anzaldi
3
@Pankaj Même si vous hébergez un serveur local, Google ne peut pas accéder localhost. Il a besoin d'une URL accessible au public. Vous pouvez utiliser un service de transfert de base comme Finch .
Brandon Anzaldi
11
Vous pouvez également utiliser la visionneuse d'applications en direct du bureau: //view.officeapps.live.com/op/embed.aspx?src=your_url_here mettez cette URL dans un iframe
fatbotdesigns
1
@BonifacePereira Si vous configurez un intranet, vous devrez probablement effectuer une conversion localement, car GDocs et Live devraient tous deux récupérer le document quelque part. Si vous le pouvez, vous pourrez peut-être configurer un serveur pour la conversion avec OpenOffice ou quelque chose: stackoverflow.com/questions/5538584/...
Brandon Anzaldi
18
Je tiens simplement à souligner que ces deux méthodes téléchargent définitivement les fichiers sur les serveurs de Google et de Microsoft. Si vous avez affaire à des informations sensibles qui devraient avoir un accès limité, ne le faites pas. Utilisez la solution alternative avec PDF.js pour générer une version PDF du fichier à visualiser dans le navigateur et proposer un lien pour télécharger les différentes versions excel / doc.
lightswitch05
30

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' 
kernelmann
la source
1
Y a-t-il une restriction pour l'utiliser? support.microsoft.com/en-us/help/2769380/…
Vishnu
pour fournir un contre-récit - nous avons choisi la version google car le moteur de rendu de Microsoft prend beaucoup plus de temps à se charger à la fois en chrome et en ff
David Holiday
13

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

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.

ccpizza
la source
1
Je noterai que ma bibliothèque n'est pas du tout entretenue. Il était capable de convertir des fichiers docx en quelque chose qui pouvait être rendu dans le navigateur. Je ne sais plus si c'est vrai.
artburkart
2

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.

Cai Esson
la source
6
@guidomocha Ne faites pas que commenter cela, expliquez pourquoi c'est une mauvaise approche.
J.Louw
2

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

NaveenDA
la source
Dois-je pouvoir utiliser l'URL du lien de AWS S3
Vishnu
Non, vous ne fournissez que le lien local
NaveenDA
1
Merci pour votre réponse
Vishnu
Malheureusement, dans mon contexte, les formats Microsoft sont plus répandus.
guettli
1

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

JasonPlutext
la source
2
Il ne contient aucune information sur les prix. L'éditeur / visualiseur de fichiers Word est-il gratuit?
FiringBlanks
Son logiciel commercial, mais nous avons un plan gratuit pour les startups / petites entreprises, et pour les autres, un plan gratuit soumis à des limites d'utilisation. Nous publierons bientôt les détails.
JasonPlutext
cela peut-il fonctionner sur une seule page sans serveur, par exemple sur aws s3?
Graham Chiu
côté serveur, nous le conditionnons sous forme de conteneurs Docker dont vous auriez besoin pour exécuter quelque part (par exemple ECS). (En principe, nous pourrions en exécuter une partie sur Lambda, mais vous voudriez toujours un magasin de documents persistant, peut-être S3)
JasonPlutext
3
@JasonPlutext Cela semble intéressant. Mais je serai franc: je suis prêt à payer une somme modique et raisonnable pour un bon package ou service - mais «soumettez vos informations et nous vous ferons savoir ce que cela coûte» est un NON GO .
manassehkatz-Moving 2 Codidact
0

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 "[email protected]" \
-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.)

Chris Whyley
la source