Export pdf with javascript in laravel

Question

my code in index.blade.php to display the data to be exported to pdf.

<div class="card-body">
                                    <div class="table-responsive table-bordered"  id="pdf">
                                        <table class="table mb-0">
                                            <thead>
                                                <tr>
                                                    <th>NAMA</th>
                                                    <th>PERUSAHAAN</th>
                                                    <th>LOKASI ABSEN</th>
                                                    <th>MASUK</th>
                                                    <th>PULANG</th>
                                                    <TH>KETERANGAN</TH>
                                                </tr>
                                            </thead>
                                            <tbody>                          
                                                @foreach ($absen as $data)
                                                    @php
                                                        $work_hour_start = $data->work_hour_start;
                                                        $attendance_time = \Carbon\Carbon::parse($data->in_time)->format('H:i:s');
                                                        $tolerance = \Carbon\Carbon::parse($attendance_time)->subMinutes($data->late_tolerance);
                                                        $hour = $tolerance->format('H:i:s');

                                                        $attendance_grp = \App\Models\AttendanceGroup::where('id', $data->attendance_group_id)
                                                            ->select('ignore_work_hour')
                                                            ->first();

                                                        if (isset($attendande_grp)) {
                                                            if ($data->ignore_work_hour == 0 || $attendance_grp->ignore_work_hour == 0) {
                                                                if ($hour > $work_hour_start) {
                                                                    $is_late = 'Terlambat';
                                                                } else {
                                                                    $is_late = 'Tepat Waktu';
                                                                }
                                                            }
                                                        } 
                                                    @endphp
                                                    <tr>
                                                        <td>{{ $data->name ?? '' }}</td>
                                                        <td>{{ $data->alias ?? '' }}</td>
                                                        <td>{{ $data->location_name ?? '' }}</td>
                                                        <td>
                                                            <span class="badge badge-success">
                                                                {{ Carbon\Carbon::parse($data->in_time)->format('H:i:s') }}
                                                            </span>
                                                        </td>
                                                        <td>
                                                            <span class=" @if ($data->out_time != null) badge badge-info @else  @endif">
                                                                @if ($data->out_time != null)
                                                                    {{ Carbon\Carbon::parse($data->out_time)->format('H:i:s') }}
                                                                @else
                                                                    {{ '-' }}
                                                                @endif
                                                            </span>
                                                        </td>
                                                        <td>{{ $is_late }}</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

my javascript code to export pdf data from index.blade.php

   <script>
            var doc = new jsPDF();

            function printDiv(divId,title) 
            {
                let mywindow = window.open('', 'PRINT', 'height=650,width=900,top=100,left=150');

                mywindow.document.write(`<html><head><title>${title}</title>`);
                mywindow.document.write('</head><body >');
                mywindow.document.write(document.getElementById(divId).innerHTML);
                mywindow.document.write('</body></html>');

                mywindow.document.close(); // necessary for IE >= 10
                mywindow.focus(); // necessary for IE >= 10*/

                mywindow.print();
                mywindow.close();

                return true;
            }

        </script>

results after exporting pdf [![enter image description here][2]][2]

in my view i create data in tableform, i will export this data in tableform too, but the problem is the view after i export is not in table form, to export pdf i use javascript, is there any way to change my javascript code to export pdf so it can take the form of a table?

Answer 1

it is simple . because when you are creating the html to print with javascript . you simply DO NOT include the files related to styles . if there is a css file for styling you should include that in the html you are creating with js . or else if there is a bootstrap link to style elements include the link to cdn in the tag your javascript would be something like that :

 mywindow.document.write(`<html><head><title>${title}</title>`);
 mywindow.document.write('<link rel="stylesheet" type="text/css" href="your css path">');
 mywindow.document.write('</head><body >');
the rest of code...