PDF отображается в браузере (/sample.pdf), но не в приложении Tauri (Vite + React + PDF.js) ⇐ Javascript

[Anonymous]

Я создаю приложение Tauri + Vite + React, и моя программа просмотра PDF использует PDF.js. Просмотрщик прекрасно работает в браузере. Когда я посещаю -

Код: Выделить всё

http://localhost:5173/sample.pdf

PDF отображается правильно, поэтому Vite определенно обслуживает файл.
Однако внутри настольного приложения Tauri тот же PDF-файл никогда не отображается. Элемент холста отображается, но страница PDF никогда не рисуется, поэтому все, что я вижу, — это пустой холст. В пользовательском интерфейсе или терминале нет видимых ошибок.
Я подтвердил, что PDF-файл существует по адресу:

Код: Выделить всё

lonefoxpdf/public/sample.pdf

и он нормально загружается в браузере.
pdf открывается в браузере.
Я также пробовал использовать абсолютный URL-адрес файла:

Код: Выделить всё

file:///C:/Users/getsu/OneDrive/Desktop/lonefoxpdf/public/sample.pdf

Браузер по-прежнему загружает его, но приложение Tauri продолжает показывать пустой холст.
pdf не открывается в приложении.
Ниже приведены важные фрагменты моего кода:
Настройка рабочего процесса PDF.js (PdfViewer.jsx) --

Код: Выделить всё

import * as pdfjsLib from "pdfjs-dist/legacy/build/pdf";

pdfjsLib.GlobalWorkerOptions.workerSrc =
new URL('pdfjs-dist/build/pdf.worker.entry', import.meta.url).href;

useEffect that loads the PDF ---

useEffect(() => {
let cancelled = false;

const loadPdf = async () => {
try {
const pdf = await pdfjsLib.getDocument("/sample.pdf").promise;
if (cancelled) return;

const page = await pdf.getPage(1);
const viewport = page.getViewport({ scale: 1.2 });

const canvas = canvasRef.current;
canvas.width = viewport.width;
canvas.height = viewport.height;
const ctx = canvas.getContext("2d");

await page.render({ canvasContext: ctx, viewport }).promise;
setLoading(false);

} catch (error) {
console.error("Error loading PDF:", error);
setLoading(false);
}
};

loadPdf();
return () => { cancelled = true };
}, []);

Как я визуализирую компонент (App.jsx) ---

Код: Выделить всё

Белый список Tauri (конфигурация по умолчанию)
Я использую конфигурацию белого списка Tauri по умолчанию ---

Код: Выделить всё

"allowlist": {
"fs": {
"readFile": true,
"scope": ["$RESOURCE/*", "$APP/*"]
}
}

Я все еще новичок в программировании и обучении по ходу дела, поэтому заранее извиняюсь, если упускаю что-то очевидное. Если есть дополнительная информация, которую мне следует включить, или если есть лучший способ структурировать логику загрузки PDF специально для Таури, дайте мне знать. Буду признателен за любые рекомендации!

Подробнее здесь: https://stackoverflow.com/questions/798 ... e-react-pd