Que dois-je faire si React n'affiche pas les informations de génération de PDF ?

Solution pour que React n'affiche pas les informations de génération de PDF : 1. Obtenez l'adresse URL du PDF en arrière-plan, puis demandez le fichier PDF ; 2. Définissez le type de réponse sur blob lors de la demande du fichier PDF ; 3. Convertissez le fichier PDF ; au format base64 ; 4. Utilisez le canevas pour présenter le PDF.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Que dois-je faire si React n'affiche pas les informations de génération de PDF ?

Résoudre le problème de l'affichage et de l'impression des PDF dans les projets React

Il y a une telle exigence dans le projet récent :

• Le PDF peut être affiché sur la page

• Je ne veux pas imprimer la page entière, imprimer et afficher uniquement le PDF Pour la partie, vous pouvez utiliser la fonction d'impression intégrée au navigateur

Affichage des fichiers PDF

J'étais vraiment confus lorsque j'ai reçu cette exigence. Comme je n’ai jamais rien fait de pareil, je ne sais pas par où commencer. En vérifiant les informations, j'ai découvert qu'il existe de nombreux plug-ins jQuery capables d'afficher des PDF, mais nous sommes un projet d'application réactif d'une seule page. Il semble que ces plug-ins ne soient pas adaptés et nous ne pouvons en trouver que d'autres. méthodes.

Plus tard, j'ai trouvé le composant react-pdf-js sur npmjs.com, pensant qu'il serait possible d'afficher des pdf. J'ai hâte d'installer la dépendance react-pdf-js dans le projet via la commande cnpm install react-pdf-js --save-dev, et de l'introduire dans le projet en important un PDF depuis 'react-pdf-js' . Insérez

Pendant le processus de débogage, j'ai constaté que les fichiers PDF statiques peuvent être affichés, mais pas les fichiers PDF en ligne. Grâce au message d'erreur de contrôle, nous savons que le composant react-pdf-js nécessite que l'adresse du fichier soit au format URL ou base64. Puisque l'URL ne fonctionne pas, nous ne pouvons nous fier qu'à base64.

Obtenir le fichier PDF

Au début, j'ai directement converti l'URL de l'adresse en ligne du PDF en base64, mais elle n'a pas pu être affichée. Plus tard, j'ai compris qu'il était inutile de simplement convertir l'URL au format base64. Vous devez convertir le contenu du fichier pdf en base64. Ensuite, il est logique de demander à nouveau le fichier pdf via l'adresse URL du pdf obtenue en arrière-plan.

J'ai rencontré un petit problème en faisant cette partie : la demande a abouti, mais le fichier pdf n'a pas pu être obtenu. J'ai longtemps lutté avec cela et je ne savais pas comment le résoudre. J'ai décrit le problème à notre. L'architecte de l'entreprise et nous l'avons analysé. Cela était dû à un problème inter-domaines. Il a configuré le serveur nginx pour résoudre le problème inter-domaines.

'Content-Type':  'application/x-www-form-urlencoded;charset=utf-8',
'Access-Control-Allow-Origin': 'https://www.nurse-go.cn:9091',
'Access-Control-Allow-Methods': 'GET',
'Access-Control-Allow-Headers': 'X-Custom-Header',
'Access-Control-Allow-Credentials': true,

Convertir des fichiers PDF au format base64

base64 peut stocker des fichiers dans n'importe quel format, une excellente méthode de stockage. Convertissez le fichier au format base64.

Il convient de noter ici que lors de la demande d'un fichier pdf, le type de réponse doit être défini sur blob. La raison pour laquelle le type blob est utilisé est expliquée ci-dessous. À ce stade, j'ai obtenu le fichier pdf et je l'ai converti au format base64.

let reader  = new FileReader()
let fileParts = []
fileParts.push(this.props.pdfFile)
let blob = new Blob(fileParts, {type : 'application/pdf'})
if (blob) {
    reader.readAsDataURL(blob)
}
let base64
let that = this      // 处理this的指向  
reader.addEventListener("load", function () {
    base64 = reader.result
   that.setState({
          base64: base64,
 })
}, false);

Conversion du format base64, si nécessaire, le format blob sera converti au format pdf base64, et dans file={file}, il sera affiché sur le navigateur. En fait, il s’agit finalement d’un PDF présenté sous forme de toile.

L'affichage PDF est terminé et la prochaine étape est l'impression.

Impression de fichiers PDF

Sur le navigateur, l'impression est divisée en impression pleine page et impression de partie désignée. Le projet doit imprimer une partie du contenu. Il existe de nombreuses façons de réaliser l'impression. J'ai utilisé le contrôle CSS traditionnel. Utilisez @media print pour masquer les parties qui n'ont pas besoin d'être imprimées, le reste étant ensuite la partie qui doit être imprimée.

Débogage de l'impression de fichiers PDF

Voici un petit conseil de débogage : parce que les styles dans @media print ne seront appelés que lorsque l'impression du navigateur est appelée, vous pouvez donc mettre cette partie du style à l'extérieur. à imprimer sont masqués. Supprimez ensuite les styles externes et imprimez-les sur @media.

Le window.print() utilisé pour appeler l'impression du navigateur n'est pas compatible avec tous les navigateurs, mais les navigateurs avancés courants sont compatibles, ce qui répond aux besoins de notre projet. Je ne continuerai pas à approfondir ici.

De nombreux problèmes sont rencontrés lors de l'affichage et de l'impression du pdf. Ce qui suit est un résumé.

Apprentissage recommandé : "Tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!