Home / Questions / 368721
Accepted
Noob Dev
Asked: 2020-06-26 17:01:14 +0800 CST 2020-06-26 17:01:14 +0800 CST

Using PDF.js with Laravel

  • 772

I want to be able to display a PDF document on most devices and implementing tags objector iframenot was the solution. I did some research and the solution was to use PDF.js, developed by Mozilla, but I'm having trouble implementing the PDF.js viewer in a view of my Laravel app.

I tried to follow a tutorial, here you can consult it.

I was able to follow the first part without problems, downloading the recent PDF.js files, as I said in the tutorial.

The first part was how to test the tool, it was executed correctly and it is also visible on Android, something that could not be done only using HTML tags:

// Archivo simple.js - (pdf.js en un archivo de PDF.js de 13 mil líneas de códigp)
var loadingTask = pdfjsLib.getDocument("/test.pdf"); //Archivo en carpeta public
loadingTask.promise.then(
  function (pdf) {
    // Load information from the first page.
    pdf.getPage(1).then(function (page) {
      var scale = 1;
      var viewport = page.getViewport({scale:1});

      // Apply page dimensions to the <canvas> element.
      var canvas = document.getElementById("pdf");
      var context = canvas.getContext("2d");
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      // Render the page into the <canvas> element.
      var renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      page.render(renderContext).then(function () {
        console.log("Page rendered!");
      });
    });
  },
  function (reason) {
    console.error(reason);
  }
);


<html>
<head>
  <meta charset="UTF-8">
  <title>PDF.js Example</title>
  <script src="/pdf.js"></script>
  <script src="/simple.js"></script>
</head>
<body>
  <canvas id="pdf"></canvas>
</body>
</html>

With this implementation, only the first page of the PDF is displayed, and it looks good on mobile.

But in the second part of the tutorial, there was a different implementation to display the entire PDF document.

I had to copy all the files with their folders, which I downloaded previously and put them in my project, but in the tutorial it was not a Laravel project... So I modified the steps a bit to achieve it.

I copied the folders that came in PDF.js into one called "Viewer" and I placed the "Viewer" folder in Laravel's "views" folder. NOTE: I had to change the name of viewer.htmla viewer.blade.phpsince it .htmlshowed me the file in plain text.

enter image description here

Now the new implementation was with a tag iframe:

<iframe
    src="/web/viewer.html?file=/test.pdf"
    width="800px"
    height="600px"
    style="border: none;" />

But since I'm with Laravel I had to create a route and a method in the controller and it would look like this:

<-- home.blade.php ->

<iframe src="{{route('render-pdf',[$post->file_route])}}" width="100%" height="auto" style="border: none;"></iframe>


<-- web.php ->

Route::get('/show-pdf/{path}', 'Frontend\PostController@renderPdf')->name('render-pdf');


<-- FileController.php ->

public function renderPdf($path)
{
    return view('viewer.web.viewer');
}

With this I get a 404: enter image description here

So again I try to modify the iframewith this, changing the parameter to a file in the folder public:

<iframe src="{{route('render-pdf',['/test.pdf'])}}" width="100%" height="auto" style="border: none;"></iframe>

But it shows me this:

enter image description here enter image description here

And looking at the tab Redin the element inspector, it shows me a 404 at http://localhost:3000/show-pdf/build/pdf.js: enter image description here

I don't know what I'm missing, it showed me the PDF viewer buttons, albeit poorly rendered, and didn't load the PDF for me.

pdf

1 Answers

  1. Best Answer

    I found a solution to make it show on all devices:

    The answer is to use the Google Drive viewer (not Google Docs) as a tag iframe, as shown below:

    .doc-container {
    width: 100%;
    overflow: scroll;
    max-height: 50vh;
    border: 1px solid black;
    iframe {
        width: 150%;
    }
}
    <div class="doc-container">
    <iframe src="https://drive.google.com/viewerng/viewer?url={{$path}}&embedded=true" frameborder="0"></iframe>
</div>

    This only works with files that are available online, so the storage - bucketGoogle Cloud where you have the PDF files must be public.

    This ensures compatibility for displaying PDF files in any browser.

    • 0