Jump to content
Nico47

Css in Pdf not working.

Recommended Posts

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×