Estoy tratando de hacer una página muy básica que se cargue en dos documentos PDF específicos y, al cargar la página, simplemente mostraría uno y luego, después de un lapso de tiempo de 60 segundos, se desplazaría y mostraría el otro.
Mi problema, actualmente, es simplemente convertir los archivos PDF en variables en el JS para poder asignarles el ciclo de tiempo.
¿Cómo puedo tomar los archivos PDF que se envían desde el controlador y ponerlos en variables JS para lograr esto correctamente?
public function getPDFDocs() { if(Storage::disk('test_docs')->exists('testFirstFile.pdf')){ $file1 = Storage::disk('test_docs')->get('testFirstFile.pdf'); } if(Storage::disk('test_docs')->exists('testSecondFile.pdf')){ $file2 = Storage::disk('test_docs')->get('testSecondFile.pdf'); } return view('test.index') ->with('firstFile', $file1) ->with('secondFile', $file2); }índice.blade.php
@section('loadjs') getPDFPages() { let visible = []; //visible.push ({pages here??}) } @endsectionEn primer lugar, parece que está obteniendo el contenido del archivo PDF, no su ruta. Por lo tanto, puede que no sea eficiente transferir datos PDF completos en su respuesta HTTP inicial.
¿Estos archivos PDF son de acceso público? Si es así; devolver su url http en lugar de los datos de pdf.
Después; para inyectar datos del backend de Laravel a JavaScript en un archivo blade; El mejor enfoque es convertir sus datos en json, enviarlos a Blade y escribirlos como un atributo de datos de un elemento HTML, luego, en JavaScript, leerlos desde el atributo de datos y decodificar json en un objeto JS.
Aquí hay un ejemplo;
public function getPDFDocs() { if(Storage::disk('test_docs')->exists('testFirstFile.pdf')){ // assuming this files publicly accessible and use url method $files[1] = Storage::disk('test_docs')->url('testFirstFile.pdf'); } if(Storage::disk('test_docs')->exists('testSecondFile.pdf')){ // assuming this files publicly accessible and use url method $files[2] = Storage::disk('test_docs')->url('testSecondFile.pdf'); } return view('test.index', ['files' => $files]); }en tu espada;
<!-- write down your html here --> <span id="filesdata" data-files="{{ json_encode($files) }}" ></span> @section('loadjs') var filesJson = document.getElementById('filesdata').getAttribute('data-files'); var files = JSON.parse(filesJson); // now you have your files, lets check them console.log(files); getPDFPages() { let visible = []; //visible.push ({pages here??}) } @endsectionY use las URL de PDF para mostrarlas en el cliente. Deje que el cliente solicite y obtenga datos pdf sin procesar, no intente devolverlos en su respuesta inicial.