Css in Pdf not working.

Nico47 · March 19, 2018

Hello

Surfing al the web and trying many different things, but i dont get it right to my PDF.

We are creating product price tags for the store with barcode.
When look at preview in the popup its shows how we wanted.
2018-03-19_220349.jpg.6caf76693263ffe4cf5f24dcb0dbabe8.jpg

But when convert to PDF for print in A4 it shows total different.
2018-03-19_220418.jpg.e8a597414ce66e3d395241f2e533e7e4.jpg

Padding dont work, radius, float, -webkit etc dont work in pdf.

Barcode CSS i use:

.column1 {
    float: left;
    width: 48%;
	border:#999 dashed 1px;
	margin: 3px;

}
.column2 {
    float: right;
    width: 48%;
	border:#999 dashed 1px;
	margin: 3px;

}	
.row { 
    padding-top: 5px;
	margin-left: 10px;
	margin-right: 10px

  }

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}


body {
  background: #fff; 
}
page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {  
  width: 21cm;
  height: 29.7cm; 
}

@media print {
  body, page {
    max-width: 100%;
  }

.itemsku {
    color: #000;
    font-size: 8px;
    font-family: "Arial Black", Gadget, sans-serif;
    text-align: left;
    font-weight: bold;
    padding-left: 25px;
    }
        
.itemprice {
    background:#FF0;
    border-radius: 6px; 
    font-size: 25px;
    color: #000000;
    font-weight: bold;
    text-align: center;
    font-family: "Times New Roman", Times, serif;
    float: left;

   }
        
.itemname {
    color: #000;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;

   }
}

My pdf code:

		$html = '
		<html>
		<head>

		</head>
		<body>';

		$html .='
		<page size="A4"><div class="row">';

		foreach ($barcodes as $key => $value) {
			if ($key % 2 == 0) {
				$class = 'column1';
			} else {
				$class = 'column2';
			}
			$html .= '
			<div class="col-md-6 '.$class.'">
				<span class="itemname">'.$barcodes[$key]['name'].'</span><br />
				<span class="itemprice">'.add_currency(format_number($barcodes[$key]['price'])).'</span>
				<img style="float: right;" src="./uploads/barcode/'.$barcodes[$key]['img'].'" width="35%" alt="" /><br />
				<span class="itemsku">'.$barcodes[$key]['sku'].'</span>
			</div>
			';
		}
		$html .='
		</div></page>
		</body>
		</html>';

		//==============================================================
		//==============================================================
		//==============================================================
		//==============================================================
		//==============================================================
		//==============================================================

		require_once(APPPATH . 'third_party/Mpdf60/mpdf.php');

		$mpdf=new mPDF('c','A4','','',20,15,48,25,10,10);
		$mpdf->SetProtection(array('print'));
		$mpdf->SetTitle($data['filename']);

		$mpdf->SetDisplayMode('fullpage');

		// LOAD a stylesheet
		$stylesheet = file_get_contents('oc_contents/theme/css/barcode.css');
		$mpdf->WriteHTML($stylesheet,1); // The parameter 1 tells that this is css/style only and no body/html/text
		$mpdf->WriteHTML($html);

		$mpdf->Output('./uploads/printbarcode/'.$data['filename'].'.pdf', 'F');
		echo json_encode(array('success' => 1));
	}

What i doing wrong, sombody can help me please.

Regards

Nico47 · May 1, 2018

Still looking for solution.

Nobody?

dsonesuk · May 2, 2018

Pixels (px) are used for screen media, points (pt) are for print media, maybe that is the problem.

There's more about it here

https://gist.github.com/basham/2175a16ab7c60ce8e001

Sign In

Css in Pdf not working.

Recommended Posts

Nico47

Link to comment

Share on other sites

Nico47

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity