Range Requests Not Working in SvelteKit App with PDF.js

54 views Asked by At

I'm developing a web application using SvelteKit and attempting to load PDF files using PDF.js. While testing, I noticed that the application does not seem to send partial range requests for PDF documents, even though I've confirmed that range requests work correctly when testing with a simple Node.js server setup. The issue persists only within my SvelteKit environment.

I've set up a minimal example in SvelteKit where I use PDF.js to load a PDF document. Here's a snippet of my code in the Svelte component:

<script>
    import { onMount } from 'svelte';
    import 'pdfjs-dist/web/pdf_viewer.css';
    import * as pdfjs from 'pdfjs-dist';

    pdfjs.GlobalWorkerOptions.workerSrc =
        '/node_modules/pdfjs-dist/build/pdf.worker.mjs';

    onMount(async () => {
        try {
            const container = document.getElementById('viewerContainer');

            if (!container) throw new Error('PDF container not found');

            const { EventBus, PDFViewer } = await import('pdfjs-dist/web/pdf_viewer.mjs');

            let eventBus = new EventBus();

            let pdfViewer = new PDFViewer({
                container,
                eventBus
            });

            const loadingTask = pdfjs.getDocument({
                url: '/document.pdf'
            });

            const pdfDoc = await loadingTask.promise;

            pdfViewer.setDocument(pdfDoc);
        } catch (e) {
            console.error(e);
        }
    });
</script>

<div id="viewerContainer">
    <div id="viewer" class="pdfViewer" />
</div>

<style>
    #viewerContainer {
        overflow: auto;
        position: absolute;
        width: 100%;
        height: 100%;
    }
</style>

My Vite configuration for SvelteKit looks like this:

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [sveltekit()],
    optimizeDeps: {
        esbuildOptions: {
            target: 'esnext'
        }
    },
    build: {
        target: 'esnext'
    },
    server: {
        host: '0.0.0.0'
    }
});

When I check the Network tab in the browser's Developer Tools, all requests for the PDF are served with a 200 status code, indicating that the entire file is being requested and served, rather than just parts of it through range requests.

Additional details:

I've confirmed my server supports range requests by testing with curl. The issue does not occur when I run a basic Node.js server without SvelteKit. I'm testing in a local development environment with the default SvelteKit setup. Questions:

  1. Are there specific configurations in SvelteKit or Vite that I might be missing which are necessary to enable range requests with PDF.js?
  2. Could this issue be related to how SvelteKit serves static files or handles HTTP headers in development mode?
  3. Is there a recommended approach to ensure PDF.js can utilize partial range requests in a SvelteKit application?

Any insights or suggestions on what might be causing this issue and how to resolve it would be greatly appreciated.

What I Tried:

  1. Verifying Server Support for Range Requests: I confirmed that my server supports range requests by successfully testing with curl commands. When sending a partial content request for a PDF file stored on my server, I received a 206 Partial Content response, indicating that range requests are handled correctly in a simple Node.js server setup without SvelteKit.

  2. Minimal SvelteKit Example: I created a minimal SvelteKit application to isolate the issue, utilizing PDF.js to load a PDF document within a Svelte component. The code follows the standard PDF.js implementation pattern, and I ensured the PDF worker script is correctly pointed to and initialized.

  3. Configuration Check: I reviewed my Vite and SvelteKit configurations to look for any settings that might be impacting HTTP requests or the way static files are served, focusing on the default settings provided by SvelteKit's setup.

What I Was Expecting:

I expected PDF.js to automatically issue range requests to the server when loading PDF documents, as it does when not running within SvelteKit. This behavior optimizes loading times by fetching only the parts of the document that are needed for rendering the current view, especially for large documents. My expectation was based on PDF.js's documentation and its behavior outside of SvelteKit, where it correctly utilizes partial content requests to incrementally load PDFs.

Instead, all requests for PDF documents made by PDF.js in the SvelteKit environment are answered with a 200 OK status code, indicating full file delivery instead of the expected 206 Partial Content responses for partial requests. This results in slower document load times and a less efficient data transfer, especially noticeable with large PDF files.

0

There are 0 answers