Bei der Vorschau von PDF-Dateien durch den React-File-Viewer kann das Problem, dass die Datei zu groß ist, nicht angezeigt werden
Da das Unternehmen eine Online-Vorschaufunktion benötigt, verwende ich das React-Framework. Ich habe das React-File-Viewer- Paket in npm gefunden, mich über seine Verwendung informiert und festgestellt, dass die Funktion und der Schwierigkeitsgrad durchaus geeignet sind.
Die Verwendungsmethode ist recht einfach. Laden Sie einfach das Paket npm herunter.
import FileViewer from 'react-file-viewer';
<FileViewer fileType={
type} filePath={
file} />
fileType ist der Dateityp und unterstützt theoretisch: JPG-, PNG-, GIF-, DocX-, PDF-, JPEG- und XLSX-Dateien. Im tatsächlichen Test ist die Unterstützung für XLSX jedoch nicht sehr gut und es können verstümmelte Zeichen auftreten.
filePath soll die Dateiquelle übergeben, es kann ein URL-Link sein, es sollte den Base64-Dateistream unterstützen, vergessen.
Zum Testzeitpunkt wurden mit Ausnahme der xlsx-Datei die oben genannten anderen Dateien gut angezeigt, bei der Anzeige der PDF-Datei wurde jedoch der folgende Fehler angezeigt:
Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'arraybuffer').
Zu diesem Zeitpunkt war die Funktion in Ordnung und es gab keinen Größentest für die Datei und keine Größenbeschränkung im Frontend, sodass der Test online ging.
Kürzlich haben Benutzer berichtet, dass die hochgeladene PDF-Datei nicht in der Vorschau angezeigt werden kann und die Dateigröße 3,45 MB beträgt. Ich habe das PDF vom Benutzer zum Testen hochgeladen und die lokale Umgebung zeigt es nicht an.
Zuerst dachte ich, es liege
an 1. Dem chinesischen Namen der Datei, aber nach der Namensänderung konnte sie immer noch nicht angezeigt werden.
2. Die geänderte PDF-Datei ist eine „seriöse“ PDF-Datei zur Überwachung der PDF-Datei.
3. Bestimmen Sie die Größe der Datei, komprimieren Sie die PDF-Datei, komprimieren Sie sie auf 1,23 MB, laden Sie sie hoch und stellen Sie fest, dass die PDF-Datei beschädigt ist. . .
4. Ich habe meine eigene Datei mit einer Größe von 1,45 MB zum Testen genommen und sie wurde angezeigt
Aber selbst wenn es angezeigt wird, meldet die Konsole immer noch den oben genannten Fehler.
Zuerst dachte ich, dass es notwendig sei, zusätzliche JS zum Laden des Pakets zu verwenden, da es sich um eine Single-Page-Anwendung handelt. Wenn das zusätzliche JS eine Anfrage an den aktuellen Domänennamen sendet, ist es dazu bestimmt, eine lokale Route zu nehmen Es ist normal, dass nicht darauf zugegriffen werden kann.
Die tatsächliche Situation ist jedoch, dass überhaupt keine spezifische JS-Anfrage gesendet wird und dieser Aspekt in npm nicht beschrieben wird.
So zeigen Sie den Quellcode von React-File-View an: Für die Vorschaufunktion von PDF besteht die ungefähre Implementierung darin, die PDF-Quelle über eine Methode zu transkodieren, sie auf bestimmte Weise in die neu erstellte Leinwand einzufügen und die Vorschau zu realisieren pdf durch Anzeigen von Canvas
Ich kann nicht erkennen, wo das Problem liegt. . .
Anstatt darüber nachzudenken, wie andere es hier geschrieben haben, ist es besser, nach anderen Komponentenpaketen zu suchen. Schließlich ist React-File-View auch ein Produkt von 2007 und das letzte Update liegt 2 Jahre zurück.
Für bestimmte Vorschau-PDF-Dateien stehen viele Typen zur Auswahl. Fancy React-pdf
Ein Toolkit mit Zehntausenden Downloads pro Woche.
Die Art der Anwendung ist immer noch so einfach.
import {
Page } from 'react-pdf';
import {
Document } from 'react-pdf/dist/esm/entry.webpack';
<Document
file={
file}
onLoadSuccess={
this.onDocumentLoadSuccess}
>
<Page pageNumber={
pageNumber} />
</Document>
Hinweis : Seite und Dokument werden separat referenziert. Wenn sie direkt von React-PDF aus referenziert werden, können die oben genannten Probleme auftreten. Wer Interesse hat, kann es ausprobieren.
onLoadSuccess akzeptiert eine Funktion und der Standardparameter gibt die Seitenzahl zurück, also die Gesamtzahl der Seiten in diesem PDF.
pageNumber akzeptiert eine Zahl und lässt die erste Seite anzeigen.
Durch die Verwaltung der Nummer im Status kann der Betrieb der vorherigen Seite und der nächsten Seite realisiert werden.
Auch eine gute Anpassung an die Dateigröße ist gegeben, zumindest bis 10M ist das kein Problem.
Führen Sie einen Verzweigungsprozess in der React-File-View durch und verarbeiten Sie die PDF-Datei separat.
。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。
Du dachtest, es wäre vorbei, aber das war nicht der Fall. . . Beim Packen mit Webpack gab es ein weiteres Problem.
Wie Sie das Problem lösen, erfahren Sie im nächsten Artikel. müde!
^ - ^