11521 sujets

JavaScript, DOM et API Web HTML5

Ouvrir un fichier téléchargé ou une app

Bonjour,

Je crée un site web permettant de gérer ses fichiers/dossiers (word, excel, mail, ppt, pdf,..).
techno: React, Redux, JavaScript, html, css

Une fonctionnalité intéressante serait de pouvoir ouvrir un fichier dans un nouvel onglet ou bien de proposer d'ouvrir l'application gérant ce type de fichier si elle est présente sur l'ordinateur (un peu comme fait Microsoft Teams quand on rejoint une réunion sur le web, si l'app est installer sur le pc il y aura une alert pour nous demander si on veut l'ouvrir dans l'application).

Quelqu'un aurait une idée de comment géré cela ?
donc soit :
- soit ouverture du fichier dans un nouvel onglet ( pour un pdf par exemple)
- soit ouvrir l'application par défaut pour le type de fichier avec le fichier (docx, ..)

Merci d'avance pour votre temps et vos éventuelles réponse Smiley biggrin
Pour ouvrir un fichier dans un nouvel onglet, tu peux faire quelque chose comme ça :


// url serait l'url du fichier que tu veux ouvrir
const openLinkInNewTab = (url) => {
    
    // Ouvre le nouvel onglet
    const newTab = window.open(url);

    // Passe sur cet onglet
    newTab.focus();
}

Modifié par Wazazaby (29 Apr 2020 - 17:44)
Merci pour ta réponse Wazazaby.

tu dois pas lui donner un type de fichier ? pour l'encodage par exemple ?
Genre un fichier pdf le navigateur va utiliser le visionneur de pdf ou il va juste afficher tout en brut ?
Je pense que tu ne pourras pas ouvrir certains types de fichiers dans la navigateur dans tout les cas, par exemple un Excel ou un Word je sais pas trop comment tu pourrais faire...
Oui c'est ce que je me disais aussi mais si excel est présent sur l'ordinateur on devrait pouvoir ouvrir le fichier avec excel directement non ? un peu comme dans l'image ci-joint.

upload/1588581427-79709-teamspopup.png
Modifié par Nicolas7 (04 May 2020 - 10:37)
Modérateur
En web je ne sais pas comment ça se passe (je n'ai jamais eu a le faire à ce jour), mais lorsque tu fais une mobile app, c'est via le protocol
<a href="myApp://">open my app</a>
.

Peut-être à creuser ?

Sinon, est-ce que tu as testé l'ouverture de l'app Team avec plusieurs navigateurs ?
Merci pour l'info c'est très intéressant, j'ai trouvé ça du coup: 
 <a href="ms-word://"> </a>

Je vais creusé un peu ça Smiley cligne

Non j'ai pas testé dans avec autre chose que du chromium (Edge chromium et chrome)
En tout cas ce qui est assez bien avec cette "popup" (je sais pas trop comment ça s'appelle) c'est que quand tu cliques sur "Open Microsoft Teams" le programme s'ouvre et te connecte sur la bonne conférence.

Mais je vais déjà testé avec le ms-word on verra bien.
Modifié par Nicolas7 (04 May 2020 - 14:46)
Pour info cela fonctionne très bien j'arrive à obtenir cette popup:
upload/1588602918-79709-unknown1.png

Bon il y a toujours un petit soucis avec l'url, faut que je comprennent ce que word attend comme url...
upload/1588602996-79709-unknown.png

Mais l'idée est la, y a plus qu'à trouver une url valide Smiley cligne
Sujet clos
Aller à