Can't get PDF.js to work

I am trying to use PDF.js to display PDF files in a view. However the view method in PdfController is never reached. Why? Route:

Route::get('/pdf/show/{filename?}', [PdfController::class, 'show'])->where('filename', '(.*)')->name('pdf.show');

show() method:

public function show($filename)
    {
        \Illuminate\Log\log()->info('Hitting show()');
        // Pass the filename to the Blade view
        return view('pdf_view', ['filename' => $filename]);
    }

pdf_view:

<!-- resources/views/pdf_view.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF Viewer</title>
    <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
    <style>
        #pdf-viewer {
            width: 100%;
            height: 100vh;
            overflow: auto;
        }
    </style>
</head>
<body>

<div id="pdf-viewer"></div>
<script>
    {{ \Illuminate\Log\log()->info('Hitting pdf_view/script'.route('pdf.view', ['filename' => $filename])); }}
    const url = '{{ route('pdf.view', ['filename' => $filename]) }}';

    const pdfjsLib = window['pdfjs-dist/build/pdf'];
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';

    const loadingTask = pdfjsLib.getDocument(url);
    loadingTask.promise.then(pdf => {
        const viewer = document.getElementById('pdf-viewer');
        for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
            pdf.getPage(pageNum).then(page => {
                const scale = 1.5;
                const viewport = page.getViewport({ scale: scale });

                const canvas = document.createElement('canvas');
                const context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                viewer.appendChild(canvas);

                const renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                page.render(renderContext);
            });
        }
    });
</script>
</body>
</html>

route:

Route::get('/pdf/view/{filename?}', [PdfController::class, 'view'])->where('filename', '(.*)')->name('pdf.view');

view() method:

public function view($filename)
    {
        \Illuminate\Log\log()->info('Hitting view()');
        // Fetch the file from the remote server
        $fileContent = Storage::disk('sftp')->get($filename);
        if ($fileContent) {
            \Illuminate\Log\log()->info('File exist');
        }else{
            \Illuminate\Log\log()->info('File not found');
        }

        // Return the file as a response
        return response($fileContent, 200)
            ->header('Content-Type', 'application/pdf');
    }

Log file:

[2024-10-15 11:33:45] local.INFO: Hitting show()  
[2024-10-15 11:33:45] local.INFO: Hitting pdf_view/script http://gnirt.test/pdf/view/uploads/yRqCiQ5mQ3lqDKkkAm4Zj31Wmr9v4YT2AZDvFOQV.pdf

I expected to see a log message also from PdfController/view(). But this method is never reached. Why?

LaryAI

1 year ago

Level 58

The issue you're experiencing is likely due to the fact that the view() method in your PdfController is not being reached because the URL being generated in your Blade view is incorrect or not accessible. Let's go through a few steps to troubleshoot and resolve this issue:

Check the URL Generation: Ensure that the URL generated by route('pdf.view', ['filename' => $filename]) is correct and accessible. You can do this by manually visiting the URL in your browser to see if it triggers the view() method.
Verify Route Configuration: Double-check that the route for pdf.view is correctly defined and matches the URL pattern you are trying to access. The route should look like this:
```
Route::get('/pdf/view/{filename?}', [PdfController::class, 'view'])
    ->where('filename', '(.*)')
    ->name('pdf.view');
```
Check File Accessibility: Ensure that the file you are trying to access exists on the remote server and that the path is correct. You can add additional logging in the view() method to confirm the file path and check if the file is being fetched correctly.
Cross-Origin Resource Sharing (CORS): If the PDF file is being fetched from a different domain, ensure that CORS is properly configured on the server hosting the PDF files. This is necessary for the browser to allow the PDF.js library to fetch and render the PDF.

Debugging: Add more logging in the view() method to capture any potential errors or issues when fetching the file. For example:

public function view($filename)
{
    \Illuminate\Support\Facades\Log::info('Hitting view() with filename: ' . $filename);

    try {
        $fileContent = Storage::disk('sftp')->get($filename);
        if ($fileContent) {
            \Illuminate\Support\Facades\Log::info('File exists');
        } else {
            \Illuminate\Support\Facades\Log::info('File not found');
        }

        return response($fileContent, 200)
            ->header('Content-Type', 'application/pdf');
    } catch (\Exception $e) {
        \Illuminate\Support\Facades\Log::error('Error fetching file: ' . $e->getMessage());
        return response('File not found', 404);
    }
}

Network Tab in Developer Tools: Use the browser's developer tools to inspect the network requests. Check if the request to the PDF file is being made and if there are any errors or issues with the request.

By following these steps, you should be able to identify why the view() method is not being reached and resolve the issue. If the problem persists, consider checking server logs or any middleware that might be affecting the request.

muuucho

1 year ago

Level 11

The view route is working and the pdf is displayed correctly.
The route is identic with Larrys suggestion.
File exists, see 1.
I don't understand but like said in 1, the file gets displayed correctly
Still, I don't reach the view() method.
Dev tool says 'Uncaught TypeError: Cannot read properties of undefined (reading 'GlobalWorkerOptions') at yRqCiQ5mQ3lqDKkkAm4Zj31Wmr9v4YT2AZDvFOQV.pdf:27:14Understand this error'. yRqCiQ5mQ3lqDKkkAm4Z…4YT2AZDvFOQV.pdf:27 Uncaught TypeError: Cannot read properties of undefined (reading 'GlobalWorkerOptions') at yRqCiQ5mQ3lqDKkkAm4Z…2AZDvFOQV.pdf:27:14 (anonymous) @ yRqCiQ5mQ3lqDKkkAm4Z…4YT2AZDvFOQV.pdf:27

I googled the error, but I couldn't find a solution to the problem.

muuucho

1 year ago

Best Answer

Level 11

I changed the view to this, and now it is working:

<!-- resources/views/pdf_view.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF Viewer</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.14.305/pdf.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.14.305/pdf.worker.min.js"></script>
    <style>
        #pdf-viewer {
            width: 50%;
            height: 100vh;
            overflow: auto;
        }
    </style>
</head>
<body>

<div id="pdf-viewer"></div>
<script>
    const url = '{{ route('pdf.view', ['filename' => $filename]) }}'; 
    const pdfjsLib = window['pdfjs-dist/build/pdf'];
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.14.305/pdf.worker.min.js';
    const loadingTask = pdfjsLib.getDocument(url);
    loadingTask.promise.then(pdf => {
        const viewer = document.getElementById('pdf-viewer');
        for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
            pdf.getPage(pageNum).then(page => {
                const scale = 1.5;
                const viewport = page.getViewport({ scale: scale });
                const canvas = document.createElement('canvas');
                const context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                viewer.appendChild(canvas);
                const renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                page.render(renderContext);
            });
        }
    });
</script>
</body>
</html>

Please or to participate in this conversation.