Der React PDF Viewer zeigt Kästchen anstelle von Text in einem neuen Fenster an, funktioniert aber im selben Fenster ein
Posted: 13 Jan 2025, 09:25
Ich verwende die @react-pdf-viewer-Bibliothek zum Rendern von PDFs in meiner React-Anwendung. Der Viewer funktioniert einwandfrei, wenn er im selben Fenster geöffnet wird. Wenn ich jedoch versuche, den Viewer in einem neuen Browserfenster darzustellen, werden nur die Felder angezeigt und der Text ist nicht sichtbar. Wenn ich die Felder kopiere und in einen Texteditor (z. B. Notepad) einfüge, wird der Inhalt korrekt angezeigt.
Hier ist meine Implementierung, um die erforderlichen Ressourcen in das neue Fenster zu laden:
Problem:
Der PDF-Viewer wird im selben Fenster korrekt gerendert, zeigt aber nur Felder im neuen Fenster an.
Der Textinhalt ist sichtbar, wenn es in einen Texteditor wie Notepad kopiert wird, aber nicht im Browserfenster angezeigt wird.
Ich habe bestätigt, dass alle erforderlichen Ressourcen (CSS- und JavaScript-Dateien) im neuen Fenster geladen sind.
Was ich versucht habe :
Ich habe dafür gesorgt, dass alles Notwendige vorhanden ist Ressourcen werden im neuen Fenster korrekt geladen.
Ich habe versucht, verschiedene Versionen der Worker-Datei pdf.worker.min.js zu verwenden, aber das hat das Problem nicht gelöst.
Ich habe überprüft, ob das Problem auftritt alle Browser, aber es ist in allen Browsern konsistent.
Was könnte dieses Problem verursachen?
Warum ist der Text im neuen Fenster nicht sichtbar, obwohl derselbe Viewer verwendet wird das gleiche Fenster?
Irgendwelche Erkenntnisse oder Vorschläge zur Lösung dieses Problems wären sehr dankbar!
Hier ist meine Implementierung, um die erforderlichen Ressourcen in das neue Fenster zu laden:
Code: Select all
export const loadPdfResources = (newWindow: any) => {
const resources = [
{ type: 'stylesheet', href: 'https://unpkg.com/@react-pdf-viewer/core/lib/styles/index.css' },
{ type: 'stylesheet', href: 'https://unpkg.com/@react-pdf-viewer/default-layout/lib/styles/index.css' },
{ type: 'stylesheet', href: 'https://unpkg.com/@react-pdf-viewer/zoom/lib/styles/index.css' },
{ type: 'stylesheet', href: 'https://unpkg.com/@react-pdf-viewer/search/lib/styles/index.css' },
{ type: 'stylesheet', href: 'https://unpkg.com/pdfjs-dist/web/pdf_viewer.css' },
{ type: 'script', src: 'https://unpkg.com/pdfjs-dist@3.9.179/build/pdf.js' },
{ type: 'script', src: 'https://unpkg.com/pdfjs-dist@3.9.179/web/pdf_viewer.js' }
];
resources.forEach(resource => {
const element = newWindow.document.createElement(resource.type === 'stylesheet' ? 'link' : 'script');
if (resource.type === 'stylesheet') {
element.rel = 'stylesheet';
element.href = resource.href;
newWindow.document.head.appendChild(element);
} else if (resource.type === 'script' && resource.src) { // Check if src is defined
element.src = resource.src;
newWindow.document.head.appendChild(element);
}
});
};
Der PDF-Viewer wird im selben Fenster korrekt gerendert, zeigt aber nur Felder im neuen Fenster an.
Der Textinhalt ist sichtbar, wenn es in einen Texteditor wie Notepad kopiert wird, aber nicht im Browserfenster angezeigt wird.
Ich habe bestätigt, dass alle erforderlichen Ressourcen (CSS- und JavaScript-Dateien) im neuen Fenster geladen sind.
Was ich versucht habe :
Ich habe dafür gesorgt, dass alles Notwendige vorhanden ist Ressourcen werden im neuen Fenster korrekt geladen.
Ich habe versucht, verschiedene Versionen der Worker-Datei pdf.worker.min.js zu verwenden, aber das hat das Problem nicht gelöst.
Ich habe überprüft, ob das Problem auftritt alle Browser, aber es ist in allen Browsern konsistent.
Was könnte dieses Problem verursachen?
Warum ist der Text im neuen Fenster nicht sichtbar, obwohl derselbe Viewer verwendet wird das gleiche Fenster?
Irgendwelche Erkenntnisse oder Vorschläge zur Lösung dieses Problems wären sehr dankbar!