haitham/sitemente
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(pdf-viewer): try CDN worker for PDF.js

Browse Source
This commit is contained in:
Horus AI
2026-03-23 22:16:07 +01:00
parent 1ca5d06696
commit 3bb2fa440f
1 changed files with 7 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/mission-control/PDFViewerClient.tsx
+7 -30
View File
@@ -17,41 +17,34 @@ export default function PDFViewerClient() {
const [currentPage, setCurrentPage] = useState(1);
const [scale, setScale] = useState(1.5);
const [pdfjsLoaded, setPdfjsLoaded] = useState(false);
const [debugInfo, setDebugInfo] = useState<string>("");
const canvasRef = useRef<HTMLCanvasElement>(null);
const pdfDocRef = useRef<any>(null);
useEffect(() => {
// Load PDF.js from CDN
// Load PDF.js from CDN with worker configured
const script = document.createElement("script");
script.src = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js";
script.async = true;
script.onload = () => {
try {
window.pdfjsLib = window.pdfjsLib;
// Use the CDN worker directly - no blob URL
window.pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";
setPdfjsLoaded(true);
setDebugInfo("PDF.js loaded successfully");
} catch (e) {
setError("Failed to initialize PDF.js");
setDebugInfo("Error loading PDF.js: " + e);
}
};
script.onerror = () => {
setError("Failed to load PDF.js library");
setDebugInfo("Script failed to load");
};
document.body.appendChild(script);
}, []);
const renderPage = async (pageNum: number) => {
if (!pdfDocRef.current || !canvasRef.current || !window.pdfjsLib) {
setDebugInfo("Cannot render: pdfDoc=" + !!pdfDocRef.current + ", canvas=" + !!canvasRef.current + ", pdfjs=" + !!window.pdfjsLib);
return;
}
if (!pdfDocRef.current || !canvasRef.current || !window.pdfjsLib) return;
try {
setDebugInfo("Rendering page " + pageNum);
const page = await pdfDocRef.current.getPage(pageNum);
const viewport = page.getViewport({ scale });
const canvas = canvasRef.current;
@@ -64,9 +57,7 @@ export default function PDFViewerClient() {
canvasContext: context,
viewport: viewport,
}).promise;
setDebugInfo("Page " + pageNum + " rendered successfully");
} catch (err) {
setDebugInfo("Render error: " + err);
console.error("Error rendering page:", err);
}
};
@@ -79,10 +70,7 @@ export default function PDFViewerClient() {
const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (!file || !window.pdfjsLib) {
setError("Please wait for PDF.js to load or check console");
return;
}
if (!file || !window.pdfjsLib) return;
if (file.type !== "application/pdf") {
setError("Please select a PDF file");
@@ -93,20 +81,16 @@ export default function PDFViewerClient() {
setError(null);
setPdfName(file.name);
setCurrentPage(1);
setDebugInfo("Loading file: " + file.name);
try {
const arrayBuffer = await file.arrayBuffer();
setDebugInfo("File loaded, parsing PDF...");
const pdf = await window.pdfjsLib.getDocument({ data: arrayBuffer }).promise;
pdfDocRef.current = pdf;
setNumPages(pdf.numPages);
setPdfData("local");
setDebugInfo("PDF parsed, " + pdf.numPages + " pages");
await renderPage(1);
} catch (err) {
setError("Failed to load PDF: " + err);
setDebugInfo("Error: " + err);
setError("Failed to load PDF");
console.error(err);
}
setLoading(false);
@@ -125,7 +109,7 @@ export default function PDFViewerClient() {
setPdfName(input.split("/").pop() || "document.pdf");
const response = await fetch(input);
if (!response.ok) throw new Error("Failed to fetch PDF");
if (!response.ok) throw new Error("Failed to fetch");
const arrayBuffer = await response.arrayBuffer();
const pdf = await window.pdfjsLib.getDocument({ data: arrayBuffer }).promise;
pdfDocRef.current = pdf;
@@ -133,7 +117,7 @@ export default function PDFViewerClient() {
setPdfData("url");
await renderPage(1);
} catch (err) {
setError("Failed to load PDF from URL. Make sure the URL is publicly accessible.");
setError("Failed to load PDF from URL. Make sure it's publicly accessible.");
console.error(err);
}
setLoading(false);
@@ -198,13 +182,6 @@ export default function PDFViewerClient() {
</div>
</div>
{/* Debug info */}
{debugInfo && (
<div className="bg-slate-900 px-6 py-1 text-xs text-slate-500 border-b border-slate-800">
Debug: {debugInfo}
</div>
)}
{/* Error */}
{error && (
<div className="bg-red-900/50 border border-red-700 rounded-lg p-4 m-4 max-w-md">