Menu
I am using DOMPDF (v 0.5.2) to convert an html page to a pdf file.
The pdf file appears after the PHP script has run (as expected), but no styles are applied to any of the content. As far as I can find, the float property does not work with DOMPDF, so I have to do some work to get around that, but not even the font styles are being applied.
I have tried all three methods of including styles: attaching a style sheet,
<link href="styles.css" rel="stylesheet" type="text/css">
writing styles in the header,
<style>...</style>
and inline styles.
<div class="..." style="...">
The php file to create the pdf looks like this...
<?php
ob_start();
?>
<html>
<head>
<link href="flhaha.css" rel="stylesheet" type="text/css">
</head>
<body>
... content (divs, etc)
</body>
</html>
<?php
require_once("../../scripts/dompdf/dompdf_config.inc.php");
$dompdf = new DOMPDF();
$dompdf->load_html(ob_get_clean());
$dompdf->render();
$dompdf->stream('test.pdf');
?>
There is an image within the content that loads fine and is displayed properly when the pdf opens, but still no styles.
Thanks in advance!
Edit #1: The tags above were meant to be "style", not "styles". Have fixed the typo.
501
Basic Usage (Convert HTML to PDF) The following example shows how to use Dompdf to convert HTML and generate PDF with minimal configuration. Specify the HTML content in loadHtml() method of Dompdf class. Render HTML as PDF using render() method. Output the generated PDF to the Browser using stream() method.
Dompdf does not support flexbox as of this writing (current release is 0.8. 4). Refer to issue 971 for more information. You can generate that layout with a variety of stylings, but if your content goes beyond a page in length you'll run into some quirkiness around the Dompdf rendering process.
Dompdf is an HTML to PDF converter. At its heart, dompdf is (mostly) a CSS 2.1 compliant HTML layout and rendering engine written in PHP. It is a style-driven renderer: it will download and read external stylesheets, inline style tags, and the style attributes of individual HTML elements.
dompdf v0.5.x does not support floats. v0.6.0 does, though it is still an experimental feature that has to be enabled in the configuration. After testing your document I can say that dompdf doesn't handle it very well. If you want to stick with dompdf you might consider tables since your document is somewhat tabular in nature.
124
Internal stylesheet can be created by including the styles in between <style> element not <styles> element.
below stmt is wrong:
<styles>...</styles>
It should be :
<style> ... </style>
and inline styles should given as shown below:
<div class="className" style="color:red;text-align: left;">
and external style sheet should be included as shown below:
<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
If external style sheet is not working then check the source file path.
31
Simple solution is, Put your css in separate (.php) or any other server scripting file and include it in your pdf file. eg. You have pdf.blade.php file for pdf
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
{{-- <link rel="icon" href="/favicon.ico"> --}}
<title>Starter Template for Bootstrap</title>
<style type="text/css">
@include('pdf.style')
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
</body>
</html>Suppose you have css file style.css, So next step is to copy your css file content and paste it in new style.blade.php And you almost done!!
Now include it in your pdf file eg.
<style>
@include('style')
</style> thats the simple trick worked for me.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With