React-pdf: Zeigen Sie die erste Seite an, bevor das gesamte Dokument geladen wird

Erstellt am 26. Juni 2019 · 3Kommentare · Quelle: wojtekmaj/react-pdf

Bevor Sie beginnen - Checkliste

[x] Ich habe die Dokumentation in README gelesen
[x] Ich habe überprüft Probe und Testsuiten reale Leben grundlegende Implementierung zu sehen
[X] Ich habe geprüft, ob diese Frage noch nicht gestellt wurde

Was versuchst du zu erreichen?

In unserem Projekt ( Ausgabe , Demo ) möchte ich nur die Seiten laden, die ich gerade ansehe, und die erste Seite rendern, bevor das gesamte Dokument geladen wird.

Nach meinem Verständnis unterstützt PDF.js react-pdf API beschreibt, dass es möglich ist, ein PDFDataRangeTransport -Objekt in die file -Eigenschaft aufzunehmen. Ich kann jedoch nicht sehen, was zu tun ist, um diese Range-Header tatsächlich zu senden!

Beschreiben Sie die Lösungen, die Sie ausprobiert haben

[x] Überprüfen Sie, ob das Quell-PDF für das Web optimiert ist
[x] Überprüfen Sie, ob der Hosting-Dienst HTTP-Bereichskopfzeilen unterstützt

Umgebung

Chrome 75
MacOS 10.14.5
React-PDF 4.0.5
Reaktionsskripte 3.0.1
Reaktion 16.8.6

question

Quelle

joepio

Hilfreichster Kommentar

Laut den Entwicklern von PDF.js unterstützt PDF.js Dokumenten können Sie benutzerdefinierte Header festlegen. Da das Dokument das Objekt options an PDFjs.getDocument übergibt, sollte dies funktionieren:

<Document
  options={{
    httpHeaders: {
      'Accept-Encoding': 'Identity',
    }
  }}
  file={"https://example.com/some.pdf"}
>

Dies ist jedoch nicht der Fall, daher untersuche ich immer noch, was los ist. Es ist wahrscheinlich, dass es sich um ein pdf.js-Problem handelt.

joepio am 5. Aug. 2019

👍4

Alle 3 Kommentare

Hallo,
Ja, PDFDataRangeTransport sollte unterstützt werden, da React-PDF es nur an pdf.js weitergibt und sonst nicht viel damit zu tun hat. Ich habe dieses Thema bei der Erstellung von PDFDataRangeTransport-Objekten gefunden.

Der einfachste Weg, um das gewünschte Verhalten zu erreichen, scheint darin zu bestehen, einfach eine URL als file prop zu übergeben. Dies sollte gut funktionieren: https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#range

wojtekmaj am 4. Juli 2019

Vielen Dank für die Antwort (und die großartige Bibliothek) @wojtekmaj!

Leider übergebe ich die URL als Datei-Requisite ( Quelle , Demo ), aber sie wird erst gerendert, nachdem das gesamte Dokument abgerufen wurde.

Außerdem wird für die Anforderung der PDF-Datei keine Bereichskopfzeile angezeigt.

Vielleicht ist diese Bedingung nie wirklich wahr, wenn ich eine Zeichenfolge übergebe?

    // File is PDFDataRangeTransport
    if (file instanceof PDFDataRangeTransport) {
      return { range: file };
    }

joepio am 4. Juli 2019

👍1

<Document
  options={{
    httpHeaders: {
      'Accept-Encoding': 'Identity',
    }
  }}
  file={"https://example.com/some.pdf"}
>

Dies ist jedoch nicht der Fall, daher untersuche ich immer noch, was los ist. Es ist wahrscheinlich, dass es sich um ein pdf.js-Problem handelt.

joepio am 5. Aug. 2019

👍4

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

React-pdf: Zeigen Sie die erste Seite an, bevor das gesamte Dokument geladen wird

Hilfreichster Kommentar

Alle 3 Kommentare

Verwandte Themen