I'm trying to make a very barebones page that loads in two specific PDF documents and on page load would simply display one and then after a 60 second timelapse, would cycle over and show the other.
My issue, currently, is simply getting the PDFs into variables in the JS so that I can assign the time cycle to them.
How can I take the PDFs being sent from the controller and put them into JS variables in order to accomplish this properly?
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);
}
index.blade.php
@section('loadjs')
getPDFPages() {
let visible = [];
//visible.push ({pages here??})
}
@endsection
First of all, it seems you are getting the contents of file PDF, not their path. So it may not be efficient to transfer entire PDF data in your initial HTTP response.
Do this PDF files publicly accessible? If so; return their http url instead of pdfs' data.
After that; to inject a data from Laravel backend to JavaScript in a blade file; best approach is turn your data to json, send it to blade and write it as an HTML element's data- attribute, then in JavaScript read it from data- attribute and decode json to a JS object.
Here is an example;
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]);
}
In your blade;
<!-- 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??})
}
@endsection
And use PDF URLs to show them in client. Let the client request and get raw pdf data, don't try to return them in your initial response.