Intégrer un fichier PowerPoint .ppt ou .pptx dans une page HTML

Oui, c'est possible, mais il faut distinguer plusieurs méthodes.

Le point essentiel est le suivant :

Un navigateur Web ne sait pas afficher nativement un fichier .ppt ou .pptx comme il sait afficher directement un PDF, une image ou une page HTML.

Il faut donc utiliser soit un service capable de lire PowerPoint, soit convertir la présentation dans un format adapté au Web.

1. Utiliser PowerPoint pour le Web

Microsoft permet d'intégrer une présentation PowerPoint dans une page Web à l'aide d'un <iframe>.

Le principe est :

<iframe
    src="URL_DE_LA_PRESENTATION"
    width="100%"
    height="600"
    frameborder="0">
</iframe>

La présentation est alors rendue par le service Microsoft, et non directement par le navigateur.

C'est la solution la plus simple si tu veux conserver :

• les diapositives ;
• les animations ;
• les transitions ;
• une partie des fonctionnalités PowerPoint.

Microsoft documente officiellement l'intégration d'une présentation PowerPoint dans une page Web.

2. Mais attention à CORS

C'est ici que ta remarque précédente sur CORS est particulièrement importante.

Il faut distinguer :

CORS

CORS concerne notamment les requêtes JavaScript telles que :

fetch("https://autre-site.fr/presentation.pptx")

Si autre-site.fr n'autorise pas ton domaine avec l'en-tête approprié :

Access-Control-Allow-Origin: https://ton-site.fr

le navigateur empêchera ton JavaScript d'accéder à la réponse.

Tu ne peux pas contourner CORS avec du JavaScript côté navigateur.

<iframe>

Un <iframe> est différent.

<iframe src="https://autre-site.fr/presentation"></iframe>

Le navigateur peut charger une ressource externe dans l'iframe sans pour autant donner à ton JavaScript l'accès à son contenu.

Mais le serveur distant peut interdire l'intégration avec notamment :

X-Frame-Options: DENY

ou :

X-Frame-Options: SAMEORIGIN

Il peut également utiliser une politique Content-Security-Policy, notamment frame-ancestors, pour empêcher l'affichage dans un iframe.

Donc :

CORS et les protections d'iframe sont deux mécanismes différents.

3. Mettre directement le .pptx dans un <iframe>

Je ne recommande pas ceci :

<iframe src="presentation.pptx"></iframe>

Un navigateur n'est pas un lecteur PowerPoint.

Selon le navigateur et l'environnement, le fichier pourra être :

• téléchargé ;
• transmis à une application externe ;
• affiché de manière non exploitable ;
• ou ne pas être affiché du tout.

Il ne faut donc pas considérer cette méthode comme un véritable lecteur PowerPoint HTML.

4. La solution que je recommande dans ton environnement : PPTX → PDF → PDF.js

Comme tu utilises déjà PDF.js, il existe une solution beaucoup plus propre.

Le principe est :

presentation.pptx
       │
       ▼
   LibreOffice
       │
       ▼
presentation.pdf
       │
       ▼
     PDF.js
       │
       ▼
    page HTML

Tu conserves le fichier PowerPoint original et tu génères une version PDF destinée à l'affichage.

Par exemple :

libreoffice --headless \
  --convert-to pdf \
  presentation.pptx \
  --outdir pdf/

Tu obtiens :

presentation.pptx
presentation.pdf

Puis PDF.js affiche :

presentation.pdf

dans ta page HTML.

5. Et cette solution règle très bien ton problème CORS

Supposons que ta page soit :

https://monsite.fr/actualites/presentation.php

et que ton PDF soit :

https://monsite.fr/documents/presentation.pdf

Le document et la page sont sur la même origine.

Tu évites donc le problème classique :

page sur domaine A
        ↓
fetch()
        ↓
PDF/PPTX sur domaine B
        ↓
       CORS
        ↓
      blocage

Avec ton propre domaine :

page HTML
    ↓
PDF.js
    ↓
PDF
    ↓
même domaine

c'est beaucoup plus simple.

6. Si le PowerPoint vient d'un autre site

C'est différent.

Par exemple :

https://mon-site.fr/page.html

qui essaie de récupérer :

https://autre-site.fr/documents/rapport.pptx

avec :

fetch(...)

Tu dépends alors de la configuration CORS du serveur autre-site.fr.

Si celui-ci ne permet pas les requêtes provenant de ton domaine, le navigateur bloque l'accès à la réponse.

Une solution consiste éventuellement à faire récupérer le fichier par ton serveur, puis à le servir depuis ton propre domaine.

Architecture :

Navigateur
    │
    ▼
mon-site.fr
    │
    ▼
PHP sur ton serveur
    │
    ▼
autre-site.fr
    │
    ▼
presentation.pptx

Le navigateur ne fait alors plus directement la requête cross-origin.

Il faut cependant que le téléchargement soit techniquement possible et que tu aies le droit de récupérer et de republier le document.

7. Attention : PDF ne reproduit pas tout PowerPoint

La conversion :

PPTX → PDF

est excellente pour une présentation essentiellement constituée de diapositives statiques.

Le PDF conserve généralement :

• le texte ;
• les images ;
• les graphiques ;
• les formes ;
• la mise en page ;
• les différentes diapositives.

Mais il ne reproduit pas réellement les fonctionnalités interactives de PowerPoint.

Tu risques notamment de perdre :

• les animations ;
• les transitions ;
• certaines vidéos ;
• certains effets ;
• certains éléments interactifs.

Si ces fonctions sont indispensables, PowerPoint pour le Web est préférable.

8. Comparaison

9. Ce que je choisirais pour ton site

Compte tenu de ton utilisation actuelle de PDF.js, je choisirais clairement :

             PowerPoint
                 │
                 ▼
              `.pptx`
                 │
                 ▼
          LibreOffice
                 │
                 ▼
               `.pdf`
                 │
                 ▼
              PDF.js
                 │
                 ▼
          page de ton site

Cela présente plusieurs avantages :

• tu maîtrises complètement les fichiers ;
• tu ne dépends pas de OneDrive ;
• tu ne dépends pas du lecteur Microsoft ;
• tu peux héberger les fichiers sur ton serveur ;
• tu évites les problèmes CORS liés à un document externe ;
• tu réutilises ton installation PDF.js actuelle ;
• tu peux afficher la présentation directement dans une page de ton site.

10. Conclusion

Oui, on peut intégrer une présentation PowerPoint dans une page HTML, mais pas en comptant sur le navigateur pour lire directement le .pptx.

Il y a deux vraies solutions.

Si tu veux conserver le comportement PowerPoint

PPTX
 ↓
PowerPoint pour le Web
 ↓
iframe
 ↓
page HTML

Si tu veux une solution autonome sur ton propre site

PPTX
 ↓
LibreOffice
 ↓
PDF
 ↓
PDF.js
 ↓
page HTML

Pour ton environnement, je recommande la deuxième solution.

Et concernant CORS, le point essentiel est :

Si la page HTML, PDF.js et le PDF sont servis depuis ton propre domaine, tu évites le problème cross-origin qui se pose lorsque le navigateur doit récupérer directement un document depuis un autre domaine.

Les protections CORS, X-Frame-Options et Content-Security-Policy restent cependant distinctes : avoir un problème avec l'une ne signifie pas nécessairement avoir un problème avec les deux autres.

Afficher un PPTX avec animations dans une iframe HTML

Question : Est-il possible de lire un fichier PowerPoint (.pptx) avec ses animations directement dans une iframe d'une page HTML ?

Réponse : Oui, mais pas directement car le format PPTX n'est pas un format web. Il doit passer par un service ou une conversion.

Option 1 – Microsoft Office Online Viewer (gratuit)

La solution la plus fiable pour un affichage immédiat.

Prérequis

• Le fichier .pptx doit être hébergé sur une URL publique (OneDrive, Dropbox, serveur web, etc.).

Code HTML à placer dans votre page

<iframe src="https://view.officeapps.live.com/op/embed.aspx?src=URL_PUBLIQUE_DU_FICHIER.pptx"
        width="100%" height="600px" frameborder="0">
</iframe>