Level 8
Are you using div's? I spend 2 weeks and was not able to sort this question with div's, but everuthing is possible with tables. ;) try to use tables.
Feb 29, 2016
6
Level 1
DOMPDF From Blade Template
Hi I am trying to generate a pdf file from blade template using DOMPDF but i got a totally different layout from the HTML view. For comparison this is my PDF view http://prntscr.com/a9ooo6
and this is my HTML View
Here is my code for generating the PDF
public function cetak()
{
$summary = DB::table('harian')->select(DB::raw('SUM(jumlah) as jumlah'), 'kode_input')->groupBy('kode_input')->whereMonth('date', '=', 02)->get();
// mengarahkan view pada file pdf.blade.php di views/provinsi/
$view = view('cetak.spm', ['summary' => $summary, 'i' => 0])->render();
// set ukuran kertas dan orientasi
$pdf = PDF::loadHTML($view)->setPaper('legal', 'potrait')->setWarnings(false)->save('myfile.pdf');
// cetak
return $pdf->stream();
}
I can paste the blade here, but It's too long. If it can help you help me, I will paste the code here. And I am using Laravel 5.2.
Thank you.
Level 1
@freel I am using table, here is my blade View
<html>
<head>
<title>PRINT OUT</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type='text/css'>
body {font-family:arial;font-size:11pt;padding:0;margin:0;}
a {color: #0000FF}
a:hover {text-decoration:underline}
table {border-collapse:collapse;table-layout:fixed}
.t {font-family:Calibri;text-align:left;vertical-align:bottom}
.r1 {font-weight:bold;text-align:center}
.r21 {text-align:center;vertical-align:middle}
.c21_1 {text-align:left;vertical-align:bottom}
.c21_2 {border-top:1px solid #000000;border-left:1px solid #000000}
.c21_12 {border-top:1px solid #000000;border-left:1px solid #000000;border-right:1px solid #000000}
.c22_4 {text-align:left;border-top:1px solid #000000;border-left:1px solid #000000}
.c23_2 {border-top:1px solid #000000}
.c23_4 {vertical-align:middle;border-top:1px solid #000000}
.c25_4 {vertical-align:middle}
.c31_9 {font-weight:bold;text-decoration:underline}
</style>
</head>
<body>
<table class='t'>
<tr style='height:18px' class='r1'>
<td colspan='12'>
SURAT PERNYATAAN
</td>
</tr>
<tr style='height:18px' class='r1'>
<td colspan='12'>
MELAKUKAN KEGIATAN MANAJEMEN PNS
</td>
</tr>
<tr style='height:18px'>
<td style='width:17px'></td>
<td style='width:28px'></td>
<td style='width:83px'></td>
<td style='width:178px'></td>
<td style='width:14px'></td>
<td style='width:76px'></td>
<td style='width:67px'></td>
<td style='width:69px'></td>
<td style='width:66px'></td>
<td style='width:48px'></td>
<td style='width:53px'></td>
<td style='width:87px'></td>
</tr>
<tr style='height:18px'>
<td style='width:17px'></td>
<td colspan='11'>
Yang bertanda tangan di bawah ini:
</td>
</tr>
<tr style='height:18px'>
<td style='width:17px'></td>
<td style='width:28px'></td>
<td colspan='2'>
Nama
</td>
<td style='width:14px'>
:
</td>
<td colspan='7'>
ABD. RAHMAN, S.IP
</td>
</tr>
<tr style='height:18px'>
<td style='width:17px'></td>
<td style='width:28px'></td>
<td colspan='2'>
NIP
</td>
<td style='width:14px'>
:
</td>
<td colspan='7'>
197312311993031016
</td>
</tr>
<tr style='height:18px'>
<td style='width:17px'></td>
<td style='width:28px'></td>
<td colspan='2'>
Pangkat/Golongan Ruang/TMT
</td>
<td style='width:14px'>
:
</td>
<td colspan='7'>
Penata / III/c / 01-04-2014
</td>
</tr>
<tr style='height:18px'>
<td style='width:17px'></td>
<td style='width:28px'></td>
<td colspan='2'>
Jabatan
</td>
<td style='width:14px'>
:
</td>
<td colspan='7'>
Kasubid Pengadaan Pegawai
</td>
</tr>
<tr style='height:18px'>
<td style='width:17px'></td>
<td style='width:28px'></td>
<td colspan='2'>
Unit Kerja
</td>
<td style='width:14px'>
:
</td>
<td colspan='7'>
Badan Kepegawaian Daerah Kab. Pinrang
</td>
</tr>
<tr style='height:18px'>
<td style='width:17px'></td>
<td style='width:28px'></td>
<td style='width:83px'></td>
<td style='width:178px'></td>
<td style='width:14px'></td>
<td style='width:76px'></td>
<td style='width:67px'></td>
<td style='width:69px'></td>
<td style='width:66px'></td>
<td style='width:48px'></td>
<td style='width:53px'></td>
<td style='width:87px'></td>
</tr>
<tr style='height:18px'>
<td style='width:17px'></td>
<td colspan='11'>
Menyatakan bahwa:
</td>
</tr>
<tr style='height:18px'>
<td style='width:17px'></td>
<td style='width:28px'></td>
<td colspan='2'>
Nama
</td>
<td style='width:14px'>
:
</td>
<td colspan='7'>
RULLI WUJI WIJIANTO, S.AP
</td>
</tr>
<tr style='height:18px'>
<td style='width:17px'></td>
<td style='width:28px'></td>
<td colspan='2'>
NIP
</td>
<td style='width:14px'>
:
</td>
<td colspan='7'>
198705122006041004
</td>
</tr>
<tr style='height:18px'>
<td style='width:17px'></td>
<td style='width:28px'></td>
<td colspan='2'>
Pangkat/Golongan Ruang/TMT
</td>
<td style='width:14px'>
:
</td>
<td colspan='7'>
Penata Muda / III/a / 01-04-2013
</td>
</tr>
<tr style='height:18px'>
<td style='width:17px'></td>
<td style='width:28px'></td>
<td colspan='2'>
Jabatan
</td>
<td style='width:14px'>
:
</td>
<td colspan='7'>
Analis Kepegawaian Pertama
</td>
</tr>
<tr style='height:18px'>
<td style='width:17px'></td>
<td style='width:28px'></td>
<td colspan='2'>
Unit Kerja
</td>
<td style='width:14px'>
:
</td>
<td colspan='7'>
Badan Kepegawaian Daerah
</td>
</tr>
<tr style='height:18px'>
<td style='width:17px'></td>
<td style='width:28px'></td>
<td style='width:83px'></td>
<td style='width:178px'></td>
<td style='width:14px'></td>
<td style='width:76px'></td>
<td style='width:67px'></td>
<td style='width:69px'></td>
<td style='width:66px'></td>
<td style='width:48px'></td>
<td style='width:53px'></td>
<td style='width:87px'></td>
</tr>
<tr style='height:18px'>
<td style='width:17px'></td>
<td style='width:28px'></td>
<td style='width:83px'></td>
<td style='width:178px'></td>
<td style='width:14px'></td>
<td style='width:76px'></td>
<td style='width:67px'></td>
<td style='width:69px'></td>
<td style='width:66px'></td>
<td style='width:48px'></td>
<td style='width:53px'></td>
<td style='width:87px'></td>
</tr>
<tr style='height:18px'>
<td style='width:17px'></td>
<td colspan='11'>
Telah melakukan kegiatan manajemen PNS sebagai berikut :
</td>
</tr>
<tr style='height:18px'>
<td style='width:17px'></td>
<td style='width:28px'></td>
<td style='width:83px'></td>
<td style='width:178px'></td>
<td style='width:14px'></td>
<td style='width:76px'></td>
<td style='width:67px'></td>
<td style='width:69px'></td>
<td style='width:66px'></td>
<td style='width:48px'></td>
<td style='width:53px'></td>
<td style='width:87px'></td>
</tr>
<tr style='height:69px' class='r21'>
<td class='c21_1' style='width:17px'></td>
<td class='c21_2' style='width:28px'>
NO
</td>
<td class='c21_2' style='width:83px'>
KODE KEGIATAN
</td>
<td colspan='3' class='c21_2'>
URAIAN KEGIATAN
</td>
<td class='c21_2' style='width:67px'>
TANGGAL
</td>
<td class='c21_2' style='width:69px'>
SATUAN HASIL
</td>
<td class='c21_2' style='width:66px'>
JUMLAH VOLUME KEGIATAN
</td>
<td class='c21_2' style='width:48px'>
ANGKA KREDIT
</td>
<td class='c21_2' style='width:53px'>
JUMLAH ANGKA KREDIT
</td>
<td class='c21_12' style='width:87px'>
KETERANGAN / BUKTI FISIK
</td>
</tr>
@yield('content')
<tr style='height:18px'>
<td style='width:17px'></td>
<td class='c23_2' style='width:28px'></td>
<td class='c23_2' style='width:83px'></td>
<td colspan='3' class='c23_4'></td>
<td class='c23_2' style='width:67px'></td>
<td class='c23_2' style='width:69px'></td>
<td class='c23_2' style='width:66px'></td>
<td class='c23_2' style='width:48px'></td>
<td class='c23_4' style='width:53px'></td>
<td class='c23_2' style='width:87px'></td>
</tr>
<tr style='height:18px'>
<td style='width:17px'></td>
<td colspan='11'>
Demikian pernyataan ini dibuat untuk dapat dipergunakan sebagaimana mestinya.
</td>
</tr>
<tr style='height:18px'>
<td style='width:17px'></td>
<td style='width:28px'></td>
<td style='width:83px'></td>
<td colspan='3' class='c25_4'></td>
<td style='width:67px'></td>
<td style='width:69px'></td>
<td style='width:66px'></td>
<td style='width:48px'></td>
<td style='width:53px'></td>
<td style='width:87px'></td>
</tr>
<tr style='height:18px'>
<td style='width:17px'></td>
<td style='width:28px'></td>
<td style='width:83px'></td>
<td colspan='3' class='c25_4'></td>
<td style='width:67px'></td>
<td style='width:69px'></td>
<td colspan='4'>
Pinrang, 31 Desember 2015
</td>
</tr>
<tr style='height:18px'>
<td style='width:17px'></td>
<td style='width:28px'></td>
<td style='width:83px'></td>
<td style='width:178px'></td>
<td style='width:14px'></td>
<td style='width:76px'></td>
<td style='width:67px'></td>
<td style='width:69px'></td>
<td colspan='4'>
Atasan Langsung
</td>
</tr>
<tr style='height:18px'>
<td style='width:17px'></td>
<td style='width:28px'></td>
<td style='width:83px'></td>
<td style='width:178px'></td>
<td style='width:14px'></td>
<td style='width:76px'></td>
<td style='width:67px'></td>
<td style='width:69px'></td>
<td style='width:66px'></td>
<td style='width:48px'></td>
<td style='width:53px'></td>
<td style='width:87px'></td>
</tr>
<tr style='height:18px'>
<td style='width:17px'></td>
<td style='width:28px'></td>
<td style='width:83px'></td>
<td style='width:178px'></td>
<td style='width:14px'></td>
<td style='width:76px'></td>
<td style='width:67px'></td>
<td style='width:69px'></td>
<td style='width:66px'></td>
<td style='width:48px'></td>
<td style='width:53px'></td>
<td style='width:87px'></td>
</tr>
<tr style='height:18px'>
<td style='width:17px'></td>
<td style='width:28px'></td>
<td style='width:83px'></td>
<td style='width:178px'></td>
<td style='width:14px'></td>
<td style='width:76px'></td>
<td style='width:67px'></td>
<td style='width:69px'></td>
<td style='width:66px'></td>
<td style='width:48px'></td>
<td style='width:53px'></td>
<td style='width:87px'></td>
</tr>
<tr style='height:18px'>
<td style='width:17px'></td>
<td style='width:28px'></td>
<td style='width:83px'></td>
<td style='width:178px'></td>
<td style='width:14px'></td>
<td style='width:76px'></td>
<td style='width:67px'></td>
<td style='width:69px'></td>
<td colspan='4' class='c31_9'>
ABD. RAHMAN, S.IP
</td>
</tr>
<tr style='height:18px'>
<td style='width:17px'></td>
<td style='width:28px'></td>
<td style='width:83px'></td>
<td style='width:178px'></td>
<td style='width:14px'></td>
<td style='width:76px'></td>
<td style='width:67px'></td>
<td style='width:69px'></td>
<td colspan='4'>
NIP. 197312311993031016
</td>
</tr>
</table>
</body>
</html>
So, I found the problem, it is in CSS code, I remove the
table-layout:fixed
from .table
and here is the result http://prntscr.com/a9plxy
It is still not what I am expect it to be, I don't really know CSS, so I hope someone solve this for me.
Level 1
@riddict Is your problem the overflow of the table to the right?
1 like
Level 1
@ChiefJS Yes, that is one, but I also need to load the third column to be more wide base on the value. So first I have an excel file as a template, then I convert it to HTML using HTMLWriter.xlsm. And the result is as above.
Level 1
@riddict Try placing a maximum width property for the table and an auto value for the column's width.
Level 1
@ChiefJS I try it but no success I think the DomPDF can't read the css correctly.
Please or to participate in this conversation.