web-dev-qa-db-fra.com

React - Comment ouvrir PDF fichier comme cible href

Cette tâche banale assez simple sur les vues statiques, ne se conforme pas à React.

Quelqu'un peut-il me conseiller comment ouvrir un fichier pdf en tant que href sur un nouvel onglet?

Voici mon code utilisant react-bootstrap et react-router:

    <NavDropdown eventKey={3} title="Forms">

        <MenuItem eventKey={3.1} href="https://www.google.com/" target="_blank">Form 1</MenuItem>

        <MenuItem eventKey={3.2} href="samba.pdf" target="_blank">Form 2</MenuItem>
    </NavDropdown>

Le lien externe vers Google fonctionne bien.

Le pdf (enregistré sur le même répertoire de niveau que le code ci-dessus) ne fonctionne pas.

Lorsque je clique sur le lien pdf, il me redirige vers mon itinéraire "404 catch all".

    <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/contact" exact component={Contact} />
        <Route path="/about" exact component={About} />
        <Route component={NotFound} />
    </Switch>;

EDIT: Solution ici: répondu par Link_Cable

javascriptreactjsreact-routerreact-bootstrap
4
Jonca33

Placez le pdf dans un dossier dans/src. Importez-le comme un composant. Définissez le paramètre href en tant que fichier PDF importé et cible = "_blank".

import React, { Component } from 'react';
import Pdf from '../Documents/Document.pdf';

class Download extends Component {

  render() {

    return (
      <div className = "App">
        <a href = {Pdf} target = "_blank">Download Pdf</a>
      </div>
    );
  }
}

export default Download;
5
Erik Martín Jordán

J'ai placé le texte suivant dans l'en-tête du composant dont j'avais besoin. Le document a été stocké dans le dossier Documents sous src.

import Pdf from '../Documents/doc.pdf';

Et ensuite utilisé le document importé dans la balise en utilisant href.

<a href = {Pdf}>Resume</a>

Travaillé pour moi!

0
Shayan

Côté client seulement? Donc, il n'y a pas de serveur Web pour héberger votre site Web? Si vous avez un serveur Web, vous pouvez alors renvoyer le contenu du contenu pdf brut au navigateur sous forme de contenu "application/pdf". Seul le côté client serait de spécifier un chemin relatif tel que 

<a href="../FolderName/samba.pdf">
0
Luke