1

Quiero poder mostrar un documento de PDF en la mayoría de dispositivos e implementar las etiquetas de object o iframe no eran la solución. Investigué y la solución era usar PDF.js, desarrollada por Mozilla, pero tengo problemas para implementar el visor de PDF.js en una vista de mi aplicación de Laravel.

Traté de seguir un tutorial, aquí lo pueden consultar.

La primera parte la pude seguir sin problemas, descargando los archivos recientes de PDF.js, como decía en el tutorial.

La primera parte primera parte era como probar la herramienta, se ejecutaba correctamente y también se ve en Android, algo que no se podía solamente usando las etiquetas de HTML:

// 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>

Con esta implementación, se visualiza solamente la primera hoja del PDF, y se ve bien en móviles.

Pero en la segunda parte del tutorial, había una implementación diferente para mostrar todo el docuemento PDF.

Tenía que copiar todos los archivos con sus carpetas, que descargué previamente y meterlas en mi proyecto, pero en el tutorial no era un proyecto de Laravel... Así que modifiqué un poco los pasos para lograrlo.

Copié las carpeta que venían en PDF.js en una llamada "Viewer" y la carpeta "Viewer" la coloqué en la carpeta "views" de Laravel. OJO: tuve que cambiar el nombre de viewer.html a viewer.blade.php dado que con .html me mostraba el archivo en texto plano.

introducir la descripción de la imagen aquí

Ahora la nueva implementación era con una etiqueta iframe:

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

Pero como estoy con Laravel tuve que crear una ruta y un método en el controlador y quedaría así:

<-- 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');
}

Con esto obtengo un 404: introducir la descripción de la imagen aquí

Así que de nuevo intento modificar el iframe con esto, cambiando el parámetro por un archivo en la carpeta public:

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

Pero me muestra esto:

introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

Y viendo la pestaña de Red en el inspector de elementos, me muestra un 404 en http://localhost:3000/show-pdf/build/pdf.js: introducir la descripción de la imagen aquí

No sé qué me falta, me mostró los botones del visor de PDF, aunque mal renderizados, y no me cargó el PDF.

2
  • Realicé el mismo trabajo y lo pude resolver con otra librería, desarrollada para ser implementada en Laravel. github.com/barryvdh/laravel-dompdf Para lograr el mismo resultado necesitas usar la opción stream.
    – Fabrizzio
    el 26 jun. 2020 a las 2:45
  • Acabo de terminar de implementarlo, pero desafortunadamente no funciona en algunos móviles Android. Sigo tratando de implementarlo con PDF.js, pero hasta ahora solo he podido renderizar la primera página
    – Chris
    el 26 jun. 2020 a las 20:56

1 respuesta 1

0

Encontré una solución para que se viera en todos los dispositivos:

La respuesta es usar el visor de Google Drive (no Google Docs) como un etiqueta iframe, como muestro a continuación:

.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>

Esto solamente funciona con archivos que estén disponibles en línea, por lo que el storage - bucket de Google Cloud donde tienes los archivos PDF debe de ser público.

De esta manera se asegura la compatibilidad para mostrar los archivos PDF en cualquier navegador.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.