Was soll ich tun, wenn React keine Informationen zur PDF-Generierung anzeigt?

Lösung für den Fall, dass React die PDF-Generierungsinformationen nicht anzeigt: 1. Rufen Sie die URL-Adresse des PDFs aus dem Hintergrund ab und fordern Sie dann die PDF-Datei an. 2. Legen Sie den Antworttyp beim Anfordern der PDF-Datei fest zum Base64-Format; 4. Verwenden Sie Canvas, um PDF zu präsentieren.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Was soll ich tun, wenn React keine Informationen zur PDF-Generierung anzeigt?

Lösung des Problems der PDF-Anzeige und des Druckens in Reaktionsprojekten

Im aktuellen Projekt gibt es eine solche Anforderung:

• Das PDF kann auf der Seite angezeigt werden

• Das möchte ich nicht Drucken Sie die gesamte Seite aus, drucken Sie nur das PDF aus und zeigen Sie es an. Für einen Teil können Sie die integrierte Druckfunktion des Browsers verwenden

Anzeige von PDF-Dateien

Ich war wirklich verwirrt, als ich diese Anforderung bekam. Da ich so etwas noch nie gemacht habe, weiß ich nicht, wo ich anfangen soll. Bei der Überprüfung der Informationen habe ich festgestellt, dass es viele jQuery-Plug-Ins gibt, die PDF-Dateien anzeigen können. Wir sind jedoch ein einseitiges Reaktionsprojekt. Es scheint, dass diese Plug-Ins nicht geeignet sind und wir nur andere finden können Methoden.

Später fand ich die Komponente „react-pdf-js“ auf npmjs.com und dachte, es wäre möglich, PDF anzuzeigen. Ich kann es kaum erwarten, die React-PDF-Js-Abhängigkeit über den Befehl „cnpm install React-PDF-Js --save-dev“ im Projekt zu installieren und sie durch „PDF aus „React-PDF-Js“ importieren“ in das Projekt einzuführen. . Fügen Sie f73e22e5f1b35afbd2432f86384ddfdd ein.

Während des Debugging-Prozesses habe ich festgestellt, dass statische PDF-Dateien angezeigt werden können, Online-PDF-Dateien jedoch nicht. Durch die Kontrollfehlermeldung wissen wir, dass die Komponente „react-pdf-js“ eine Dateiadresse im URL- oder Base64-Format erfordert. Da die URL nicht funktioniert, können wir uns nur auf base64 verlassen.

PDF-Datei herunterladen

Zuerst habe ich die Online-Adress-URL des PDFs direkt in Base64 konvertiert, sie konnte jedoch nicht angezeigt werden. Später habe ich herausgefunden, dass es sinnlos ist, die URL einfach in das Base64-Format zu konvertieren. Sie müssen den Inhalt der PDF-Datei in Base64 konvertieren. Als nächstes ist es logisch, die PDF-Datei erneut über die aus dem Hintergrund erhaltene URL-Adresse des PDFs anzufordern.

Ich bin bei diesem Teil auf ein kleines Problem gestoßen: Die Anfrage war erfolgreich, aber die PDF-Datei konnte ich lange nicht abrufen und wusste nicht, wie ich das Problem lösen sollte Der Architekt des Unternehmens und wir haben es durch ein domänenübergreifendes Problem verursacht. Er hat den Nginx-Server so konfiguriert, dass er das domänenübergreifende Problem löst.

'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,

PDF-Dateien in das Base64-Format konvertieren

Base64 kann Dateien in jedem Format speichern, eine großartige Speichermethode. Konvertieren Sie die Datei in das Base64-Format.

Hier muss beachtet werden, dass beim Anfordern einer PDF-Datei der Antworttyp auf Blob gesetzt werden muss. Nachfolgend wird erklärt, warum ich die PDF-Datei erhalten und in das Base64-Format konvertiert habe.

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);

Konvertierung des Base64-Formats. Bei Bedarf wird das Blob-Format in das Base64-Format-PDF konvertiert und in file={file} im Browser angezeigt. Tatsächlich handelt es sich letztendlich um ein PDF, das im Canvas dargestellt wird.

Die PDF-Anzeige ist beendet und der nächste Schritt ist das Drucken.

Drucken von PDF-Dateien

Im Browser ist das Drucken in Ganzseitendruck und bestimmten Teildruck unterteilt. Das Projekt muss einen Teil des Inhalts drucken. Es gibt viele Möglichkeiten, das Drucken zu erreichen. Verwenden Sie @media print, um die Teile auszublenden, die nicht gedruckt werden müssen, und der Rest ist der Teil, der gedruckt werden muss.

Debugging beim Drucken von PDF-Dateien

Hier ein kleiner Debugging-Tipp: Da die Stile in @media print nur aufgerufen werden, wenn der Druck des Browsers aufgerufen wird, können Sie diesen Teil des Stils außerhalb platzieren, und wenn dies nicht der Fall ist Die zu druckenden Teile werden ausgeblendet. Entfernen Sie dann die externen Stile und drucken Sie sie an @media.

Das zum Aufrufen des Browserdrucks verwendete window.print () ist nicht mit allen Browsern kompatibel, aber gängige erweiterte Browser sind kompatibel, was den Anforderungen unseres Projekts entspricht. Ich werde hier nicht weiter darauf eingehen.

Bei der Anzeige und dem Drucken von PDFs treten viele Probleme auf. Das Folgende ist eine Zusammenfassung.

Empfohlenes Lernen: „Video-Tutorial reagieren“

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn React keine Informationen zur PDF-Generierung anzeigt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!