TechQA.

DOMPDF - Script to convert HTML to PDF using DomPdf library

81 views Asked by At

I have written a scrip to create a pdf using dompdf using a simple textarea post to collect the code to be converted. When I download the document, it doesn't render correctly.

The pdf displays collapsed in the top left corner. The html code and the css has been accepted but the layout of the pdf (meant to be A4 standard) fails?

<?php
// Include Dompdf autoload file
require_once 'dompdf/autoload.inc.php';

use Dompdf\Dompdf;

// Initialize variables
$html = '';
$pdfFileName = 'document.pdf';
$errorMsg = '';

// Check if form is submitted
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Get HTML content from form
    $html = $_POST['html_content'];

    // Create a new Dompdf instance
    $dompdf = new Dompdf();

    // Load HTML content into Dompdf
    $dompdf->loadHtml($html);

    // Set paper size and orientation
    $dompdf->setPaper('A4', 'portrait');

    // Render HTML as PDF
    $dompdf->render();

    // Output the generated PDF content
    $pdfContent = $dompdf->output();

    // Prompt the user to download the PDF
    header('Content-Type: application/pdf');
    header("Content-Disposition: attachment; filename=$pdfFileName");
    echo $pdfContent;
    exit;
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML to PDF Converter</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f5f5f5;
        }

        .container {
            max-width: 600px;
            width: 100%;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        textarea {
            width: 100%;
            height: 200px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 10px;
            resize: none;
        }

        input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
        }

        input[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>HTML to PDF Converter</h2>
        <form method="post">
            <textarea name="html_content" placeholder="Enter HTML content here..." required><?php echo htmlspecialchars($html); ?></textarea><br>
            <input type="submit" value="Convert to PDF">
        </form>
        <?php if ($errorMsg): ?>
            <p><?php echo $errorMsg; ?></p>
        <?php endif; ?>
        
        <?php echo htmlspecialchars($html); ?>
    </div>
</body>
</html>

The code that I'm putting into the textarea field is as follows...

<!DOCTYPE HTML>
<head>
<title>CV</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<link rel="shortcut icon" href="favicon.ico?v=2"/>

<style>
html {
width:100%;
scroll-behavior:smooth;
}
        
body {
width:100%;
margin:0;
padding:0;
background-color:#FFF;
}

.lCol {
float:left;
width:25%;
padding:0 0 35px 0;
background-color:#101E58;
color:#FFF;
}
.lCol-h1 {
float:left;
padding:25px 0 0 10%;
font-size:2.3em;
font-weight:bold;
color:#FFF;
}
.lCol-cv {
float:left;
padding:5px 0 0 10%;
font-size:1.6em;
color:#FFF;
}
.lCol-h2 {
float:left;
width:90%;
margin:35px 0 15px 0;
padding:10px 0 10px 10%;
background-color:#070B3B;
font-size:1.4em;
font-weight:bold;
color:#FFF;
}
.lCol-a {
float:left;
width:90%;
padding:20px 0 0 10%;
font-weight:bold;
font-size:1.2em;
color:#FFF;
}
.lCol-b {
float:left;
width:90%;
padding:5px 0 10px 10%;
font-size:1.2em;
color:#FFF;
}
.lCol-ex {
float:left;
height:10px;
width:80%;
margin:10px 10% 5px 10%;
background-color:#FFF;
}
.lCol-go {
float:left;
height:10px;
width:60%;
margin:10px 30% 5px 10%;
background-color:#FFF;
}
.lCol-d {
float:left;
width:80%;
padding:0 10% 5px 10%;
font-size:1em;
color:#FFF;
text-align:right;
}

.rCol {
float:left;
width:75%;
color:#414141;
}
.rCol-h1 {
float:left;
width:80%;
margin:25px 10%;
padding:10px 0;
font-size:1.6em;
font-style:italic;
color:#101E58;
border-top:2px dotted #CCC;
border-bottom:2px dotted #CCC;
}
.rCol-p {
float:left;
width:80%;
padding:0 10%;
font-size:1.2em;
line-height:1.5em;
text-align:left;
}
.rCol-cnt {
float:left;
width:80%;
padding:0 10%;
}
.rCol-dt {
float:left;
width:20%;
padding:0 10% 0 0;
font-size:1.2em;
line-height:1.5em;
text-align:left;
}
.rCol-tt {
float:right;
width:60%;
padding:0 10% 0 0;
font-size:1.4em;
color:#101E58;
text-align:left;
}
.rCol-bl {
float:right;
width:60%;
padding:0 10% 25px 0;
font-size:1.2em;
line-height:1.9em;
text-align:left;
}
.sp {
margin-top:45px;
}
</style>
</head>

<html>
<body>

<div class="lCol">
<div class="lCol-h1">somebody<br>someone</div>
<div class="lCol-cv">Curriculum Vitae</div>
<div class="lCol-h2">Contact Info.</div>
<div class="lCol-a">Address</div>
<div class="lCol-b">whatever</div>
<div class="lCol-a">Phone</div>
<div class="lCol-b">whatever</div>
<div class="lCol-a">E-mail</div>
<div class="lCol-b">whatever</div>

<div class="lCol-h2">Skills</div>
<div class="lCol-a">Problem Solving</div>
<div class="lCol-ex"></div>
<div class="lCol-d">Excellent</div>
<div class="lCol-a">Safety Awareness</div>
<div class="lCol-ex"></div>
<div class="lCol-d">Excellent</div>
<div class="lCol-a">Critical Thinking</div>
<div class="lCol-ex"></div>
<div class="lCol-d">Excellent</div>
<div class="lCol-a">Team Communication</div>
<div class="lCol-ex"></div>
<div class="lCol-d">Excellent</div>
<div class="lCol-a">Problem Solving</div>
<div class="lCol-ex">Time management</div>
<div class="lCol-d">Excellent</div>
<div class="lCol-a">Computer Skills</div>
<div class="lCol-ex"></div>
<div class="lCol-d">Excellent</div>
<div class="lCol-a">Administration</div>
<div class="lCol-ex"></div>
<div class="lCol-d">Excellent</div>
<div class="lCol-a">Time Management</div>
<div class="lCol-ex"></div>
<div class="lCol-d">Excellent</div>
<div class="lCol-a">Manual Handling</div>
<div class="lCol-ex"></div>
<div class="lCol-d">Excellent</div>
    
<div class="lCol-h2">Languages</div>
<div class="lCol-a">English</div>
<div class="lCol-ex"></div>
<div class="lCol-d">Excellent</div>
<div class="lCol-a">Spanish (Intermediate)</div>
<div class="lCol-go"></div>
<div class="lCol-d">Good</div>
</div>
    
<div class="rCol">
<div class="rCol-h1">Background</div>
<div class="rCol-p">
lipsom ordo santum hullabaloo lipsom ordo santum hullabaloo lipsom ordo santum hullabaloo. lipsom ordo santum hullabaloo lipsom ordo santum hullabaloo lipsom ordo santum hullabaloo.
<br/>
<br/>
lipsom ordo santum hullabaloo. lipsom ordo santum hullabaloo lipsom ordo santum hullabaloo lipsom ordo santum hullabaloo.
<br />
<br />
lipsom ordo santum hullabaloo lipsom ordo santum hullabaloo lipsom ordo santum hullabaloo.
</div>

<div class="rCol-h1 sp">Work History</div>

<div class="rCol-cnt">
<div class="rCol-dt">1999-01-01 to Current</div>
<div class="rCol-tt">something </div>
<div class="rCol-bl">Permanent: somecompany</div>
</div>  
    
<div class="rCol-cnt">
<div class="rCol-dt">1999-01-01 to Current</div>
<div class="rCol-tt">something </div>
<div class="rCol-bl">Permanent: somecompany</div>
</div>  
    
<div class="rCol-h1 sp">Education</div>
    
<div class="rCol-cnt">
<div class="rCol-dt">1999-01</div>
<div class="rCol-tt">some qualification</div>
<div class="rCol-bl">Someplace Comprehensive Subjects:<br/>English, Physics, Chemistry, Biology, Mathmatics, German, Music</div>
</div>
    
<div class="rCol-h1 sp">Certification</div>
    
<div class="rCol-cnt">
<div class="rCol-dt">01/01/99 to 01/01/99</div>
<div class="rCol-tt">Some Certification</div>
<div class="rCol-bl">Qualified nerd etc...</div>
</div>
    
<div class="rCol-cnt">
<div class="rCol-dt">01/01/99 to 01/01/99</div>
<div class="rCol-tt">Some Certification</div>
<div class="rCol-bl">Qualified nerd etc...</div>
</div>
    
<div class="rCol-cnt">
<div class="rCol-dt">01/01/99 to 01/01/99</div>
<div class="rCol-tt">Some Certification</div>
<div class="rCol-bl">Qualified nerd etc...</div>
</div>
    
<div class="rCol-h1">Hobbies</div>
<div class="rCol-p">
this, that, the other...    
</div>

</div>

</body>
</html>

I have tested the above code with various online versions of html > pdf. Some render correctly, some not as well :)

php html pdf document dompdf
Original Q&A
0

There are 0 answers

Related Questions in PHP

Related Questions in HTML

Related Questions in PDF

Related Questions in DOCUMENT

Related Questions in DOMPDF

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Trending Questions