你的参考只是一个框架

<iframe class="jss687" src="/in/documentViewer.xhtml?v=2.1.196&amp;id=p::usmarcdef_0000232697&amp;file=/in/rest/annotationSVC/DownloadWatermarkedAttachment/attach_import_9ccbcf90-527a-4305-b9dd-864ec2eb694f%3F_%3D232697spa.pdf&amp;locale=en&amp;multi=true&amp;ark=/ark:/48223/pf0000232697/PDF/232697spa.pdf" frameborder="0" scrolling="no" style="display: block;"></iframe>

如果你看一下这个帧是如何管理的，它使用这个js代码和PDF.js pdfjs-2.1.196
https://unesdoc.unesco.org/in/js/pdfjs-2.1.196/pdf.worker.js
所以它基于https://github.com/mozilla/pdf.js/的旧版本

你可以像这样使用laravel Datatable
视觉刀片文件-

<div class="table-responsive tableRemove_scroll mt-2">
          <table class="table table-hover data-table" id="datatable">
                <thead>

                      <tr class="text-center">
                          

                                                <th>#</th>
                                                <th>Name</th>
                                                <th>Form No</th>
                                                <th>Country</th>
                                                <th>Class</th>
                                                 
                                                </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                            </table>
                                        </div>




<script type="text/javascript">
 
 $(function() {
        var table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('studentsfee.index') }}",
            lengthMenu: [
                [10, 50, 100, -1],
                [10, 50, 100, "All"]
            ],
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'name',
                    name: 'name'
                },

                {
                    data: 'form_num',
                    name: 'form_num'
                },

                {
                    data: 'countries_name',
                    name: 'countries_name'
                },
                
                {
                    data: 'classes_name',
                    name: 'classes_name'
                },

            ],
             dom: 'lBfrtip',
            buttons: [
                'excel', 'csv', 'pdf', 'copy'
            ]
        });

    });

    </script>

public function index（Request $request）{

$user = auth()->user();
$datas = DB::table('students_fees')->select('students_fees.*','students.name as name','students.email as email','students.mobile_no as mobile_no','students.id as st_id','students.form_num','countries.name as countries_name','classes.name as classes_name')
            ->leftJoin('students', 'students_fees.student_id', '=', 'students.id')
            ->leftJoin('countries', 'students.country_id', '=', 'countries.id')
            ->leftJoin('classes', 'students.class_id', '=', 'classes.id')
            ->get();
           
            if ($request->ajax()) {
                return DataTables::of($datas)
                        ->addIndexColumn()
                        ->editColumn('created_at', function ($row) {
                            return $row->created_at;
                        })
                        ->editColumn('updated_at', function ($row) {
                            return $row->updated_at;
                        }) 
                        ->editColumn('feetype', function ($row) {
                            
                          if($row->installments_number==1){
                            return "installments 1";
                          }elseif($row->installments_number==2){
                            return "installments 2";
                          }elseif($row->installments_number==3){
                            return "installments 3";
                          }else{
                            return "Lumpsum";
                          }
    
                        }) 
                          
                        
                        ->addColumn('action', function($row){
                               $btn = '<div class="btn-group">
                               <a href="'.route('studentsfee.view',$row->st_id).'" class="btn btn-default btn-sm rounded mr-2" title="View Details" target="_blank"><i class="nav-icon fas fa-eye"></i></a><form method="POST" id="form_id_'.$row->id.'" action="'.route('studentsfee.destroy',$row->id).'">'.csrf_field().' '.method_field('delete').'</form></div>';
                                return $btn;
                        })
                        //<a href="/image/'.$row->image.'" class="btn btn-info btn-sm"><i class="fas fa-eye"></i></a>
                        ->rawColumns(['action'])
                        ->make(true);
                        
            }
            return view('studentsfee.index');
        }