si j'importe le fichier, je peux le rendre mais pas dynamiquement à partir d'un chemin
J'ai essayé d'utiliser à la fois react-pdf, iframe.
Ci-dessous fonctionnent,
<Document file='./shared/B.pdf'> <Page pageNumber={1} /> </Document>
<iframe src= './shared/B.pdf'/>
Ci-dessous ne fonctionnent pas,
import pdf from './shared/B.pdf';
<Document file={pdf}> <Page pageNumber={1} /> </Document>
<iframe src= {pdf}/>
J'en ai besoin sans importer car j'obtiendrai le chemin du fichier au moment de l'exécution. Quelqu'un peut-il aider?
3 Réponses :
Vous pouvez utiliser l'importation dynamique -
const pdf = /* name received dynamically */
import(´${pdf}´);
En savoir plus sur l'importation dynamique - https://javascript.info/modules-dynamic-imports
essayez react-pdf
cette bibliothèque facilite l'intégration de PDF dans réagissez, comme:
<embed src="files/myfile.pdf" type="application/pdf" width="100%" height="600px" />
Comme vous pouvez le voir à partir du code source de la bibliothèque, rendre un PDF en react, ce n'est pas aussi simple que vous pourriez le penser.
Une autre méthode consiste à utiliser :
import React, { Component } from 'react';
import { Document, Page } from 'react-pdf';
class MyApp extends Component {
state = {
numPages: null,
pageNumber: 1,
}
onDocumentLoadSuccess = ({ numPages }) => {
this.setState({ numPages });
}
render() {
const { pageNumber, numPages } = this.state;
return (
<div>
<Document
file="somefile.pdf"
onLoadSuccess={this.onDocumentLoadSuccess}
>
<Page pageNumber={pageNumber} />
</Document>
<p>Page {pageNumber} of {numPages}</p>
</div>
);
}
}
Ce code que j'ai déjà essayé si je n'importe pas de pdf, il échoue.
Le PDF doit être copié en tant qu'actif dans la configuration du pack Web ou récupéré simplement par URL dans un dossier public
Lorsque vous utilisez l'importation, le bundler fourni avec create-react-app empaquette automatiquement la ressource importée dans les sources de construction.
Si vous voulez utiliser des fichiers sans les importer, vous devez d'une manière ou d'une autre configurer votre bundler pour empaqueter ces fichiers.
Le moyen le plus simple d'y parvenir avec create-react-app est de déplacer les fichiers souhaités dans le dossier public .
Donc, si vous avez la structure de répertoires suivante, cela devrait fonctionner:
public |-- shared | |-- B.pdf
Le problème ne vient pas de la réaction elle-même mais plutôt de votre bundler. Lequel utilisez-vous ? Je suis presque sûr que vous n'avez pas de dossier partagé dans votre répertoire public. D'une manière ou d'une autre, vous devez configurer votre bundler pour créer un dossier partagé avec les fichiers PDF donnés dans votre répertoire public.
J'ai créé l'application en utilisant create-react-app.
Déplacez ensuite votre dossier partagé dans le dossier public.
facebook.github.io/create-react-app/ docs /…