Email invoice in PDF | Generate PDF in Laravel | MPDF

So many time we need to send our invoices or reports in pdf. Here I'm going to explain how to generate the pdf in Laravel. You will also learn that how to send pdf in email attachment in Laravel. Here we will be creating a dynamic view page or HTML page and then will convert that html page to pdf.

Because we are creating the pdf file in Laravel so we need to install Laravel first and here is the link to let you know how to install the Laravel.

Install Laravel:
Install laravel

I'll be generating the PDF using MPDF library. So first of all we need to install mpdf using below command. I have use 6.1 version you can change it according to your need.

Install MPDF:

php composer.phar require mpdf/mpdf 6.1.0

1	php composer.phar require mpdf/mpdf 6.1.0

Here is the route to generate the pdf file in Laravel and to email it.

Route::get('send-invoice-pdf-mail', 'InvoiceController@sendPdfInvoice');

1	Route::get('send-invoice-pdf-mail', 'InvoiceController@sendPdfInvoice');

Here we have InvoiceController where we are generating the pdf file using mpdf in laravel. We just assign the email data to response variable, render that email data to view. Using $mpdf object we call the function writeHTML() which generates the pdf file and the we write that generated pdf file into invoice directory. Now we can send this pdf file in mail attachment in laravel very easily. After sending the mail we delete the generated pdf file using unlink() function.

<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\Facades\Mail;

class InvoiceController extends Controller {

    public function __construct() {
        
    }

    public function emailData() {
        return array('order_id' => '123', 'name' => 'Saurabh', 'email' => 'contact@coding4developers.com', 'city' => 'Gurgaon', 'unitPrice' => '340', 'paidUnit' => '340', 'subTotal' => '340', 'bookingId' => '1');
    }

    public function sendPdfInvoice() {
        try {
            $response = $this->emailData();
            $mpdf = new \mPDF();
            $mpdf->WriteHTML(\View::make('email.email-invoice')->with('data', $response)->render());
            $pdf_path = public_path() . '/invoice/' . $response['bookingId'] . '.pdf';
            $mpdf->Output($pdf_path, 'F');

            $subject = trans('messages.invoice_mail_subject');
            $data = array('email' => $response['email'], 'name' => $response['name'], 'org_name' => 'Coding 4 Developers');
            $status = Mail::send('email.email-report', $data, function($message) use ($data, $pdf_path, $subject) {
                        $message->to($data['email'])->subject($subject);
                        $message->from(env('MAIL_FROM', 'info@coding4developers.com'), 'Coding 4 Developers');
                        $message->attach($pdf_path);
                    });
            if ($status) {
                unlink($pdf_path);
            }
            $result = array('success' => 1, 'message' => 'Invoice Sent');
            return \Illuminate\Support\Facades\Response::json($result)->header('Content-Type', "application/json");
        } catch (\Exception $e) {
            Log::error("UserController::" . __METHOD__ . "  " . $e->getMessage());
        }
    }

}

<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;

use Illuminate\Support\Facades\Log;

use Illuminate\Support\Facades\Mail;

class InvoiceController extends Controller {

public function __construct() {

}

public function emailData() {

return array('order_id' => '123', 'name' => 'Saurabh', 'email' => 'contact@coding4developers.com', 'city' => 'Gurgaon', 'unitPrice' => '340', 'paidUnit' => '340', 'subTotal' => '340', 'bookingId' => '1');

}

public function sendPdfInvoice() {

try {

$response = $this->emailData();

$mpdf = new \mPDF();

$mpdf->WriteHTML(\View::make('email.email-invoice')->with('data', $response)->render());

$pdf_path = public_path() . '/invoice/' . $response['bookingId'] . '.pdf';

$mpdf->Output($pdf_path, 'F');

$subject = trans('messages.invoice_mail_subject');

$data = array('email' => $response['email'], 'name' => $response['name'], 'org_name' => 'Coding 4 Developers');

$status = Mail::send('email.email-report', $data, function($message) use ($data, $pdf_path, $subject) {

$message->to($data['email'])->subject($subject);

$message->from(env('MAIL_FROM', 'info@coding4developers.com'), 'Coding 4 Developers');

$message->attach($pdf_path);

});

if ($status) {

unlink($pdf_path);

}

$result = array('success' => 1, 'message' => 'Invoice Sent');

return \Illuminate\Support\Facades\Response::json($result)->header('Content-Type', "application/json");

} catch (\Exception $e) {

Log::error("UserController::" . __METHOD__ . " " . $e->getMessage());

}

email-invoice.blade.php

<!-- Emails use the XHTML Strict doctype -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <!-- The character set should be utf-8 -->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width"/>
    </head>

    <body>
        <div style="width:767px; margin:0 auto;">
            <div style="width:667px; margin:0 auto; padding-top:20px; font-family: Proxima Nova Rg; padding-bottom:20px;">

                <div style="clear:both; padding-bottom:40px;"></div>
                </section>
                <div style="float:left; width:33.3%; font-size:14px;">
                    Date Issued: <strong>{{date('jS F Y')}}</strong><br/>
                    Invoice No: <strong>{{$data['order_id']}}</strong>
                </div>
                <div style="float:left; width:33.3%;"></div>
                <div style="float:right; width:33.3%; text-align:right;">
                    <span style="font-size:24px;">{{$data['name']}}</span><br/>
                    {{$data['email']}}<br/>
                    {{$data['city']}}
                </div>
                </section>
                <div style="clear:both;padding-bottom:30px;padding-top:30px;"></div>
                <section style="font-size:11px;">
                    <div style="float:left; width:50%;">DESCRIPTION</div>
                    <div style="float:left; width:50%; text-align:center;">
                        <div style="float:left; width:33.3%;">RATE</div>
                        <div style="float:left; width:33.3%;">No. OF UNITS</div>
                        <div style="float:left; width:33.3%;">SUBTOTAL</div>
                    </div>
                </section>
                <hr/>
                <div style="clear:both; padding-bottom:30px;"></div>
                <section style="font-weight:bold;font-size:16px;">
                    <div style="float:left; width:50%; font-size:16px;">Standard Charge</div>
                    <div style="float:left; width:50%; text-align:center; font-size:16px;">
                        <div style="float:left; width:33.3%;">${{$data['unitPrice']}}</div>
                        <div style="float:left; width:33.3%;">{{$data['paidUnit']}}</div>
                        <div style="float:left; width:33.3%;">${{$data['subTotal']}}</div>
                    </div>
                </section>

            </div>
        </div>

    </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

</head>

<body>

</section>

Date Issued: <strong>{{date('jS F Y')}}</strong><br/>

Invoice No: <strong>{{$data['order_id']}}</strong>

</div>

{{$data['email']}}<br/>

</div>

</section>

<div style="float:left; width:50%;">DESCRIPTION</div>

<div style="float:left; width:33.3%;">No. OF UNITS</div>

<div style="float:left; width:33.3%;">SUBTOTAL</div>

</div>

</section>

<hr/>

<div style="float:left; width:50%; font-size:16px;">Standard Charge</div>

<div style="float:left; width:33.3%;">${{$data['unitPrice']}}</div>

<div style="float:left; width:33.3%;">{{$data['paidUnit']}}</div>

<div style="float:left; width:33.3%;">${{$data['subTotal']}}</div>

</div>

</section>

</div>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta name="viewport" content="width=device-width" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
        <style type="text/css">
            /* -------------------------------------
                            GLOBAL
            ------------------------------------- */
            * {
                margin: 0;
                padding: 0;
                font-size: 100%;
                line-height: 1.6;
            }

            img {
                max-width: 100%;
            }

            body {
                -webkit-font-smoothing: antialiased;
                -webkit-text-size-adjust: none;
                width: 100%!important;
                height: 100%;
            }


            /* -------------------------------------
                            ELEMENTS
            ------------------------------------- */
            a {
                color: #348eda;
            }
            div{
                font-size: 12px;
            }
            .margin-10{margin-top:20px; }
            .btn-primary {
                text-decoration: none;
                color: #FFF;
                background-color: #348eda;
                border: solid #348eda;
                border-width: 10px 20px;
                line-height: 2;
                font-weight: bold;
                margin-right: 10px;
                text-align: center;
                cursor: pointer;
                display: inline-block;
                border-radius: 25px;
            }

            .btn-secondary {
                text-decoration: none;
                color: #FFF;
                background-color: #aaa;
                border: solid #aaa;
                border-width: 10px 20px;
                line-height: 2;
                font-weight: bold;
                margin-right: 10px;
                text-align: center;
                cursor: pointer;
                display: inline-block;
                border-radius: 25px;
            }

            .last {
                margin-bottom: 0;
            }

            .first {
                margin-top: 0;
            }

            .padding {
                padding: 10px 0;
            }


            /* -------------------------------------
                            BODY
            ------------------------------------- */
            table.body-wrap {
                width: 100%;
                padding: 20px;
            }

            table.body-wrap .container {
                border: 1px solid #f0f0f0;
            }

            /* -------------------------------------
                            TYPOGRAPHY
            ------------------------------------- */
            h1, h2, h3 {
                color: #000;
                margin: 40px 0 10px;
                line-height: 1.2;
                font-weight: 200;
            }

            h1 {
                font-size: 36px;
            }
            h2 {
                font-size: 28px;
            }
            h3 {
                font-size: 22px;
            }

            p, ul, ol {
                margin-bottom: 10px;
                font-weight: normal;
                font-size: 14px;
            }

            ul li, ol li {
                margin-left: 5px;
                list-style-position: inside;
            }


            /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
            .container {
                display: block!important;
                max-width: 600px!important;
                margin: 0 auto!important; /* makes it centered */
                clear: both!important;
            }

            /* Set the padding on the td rather than the div for Outlook compatibility */
            .body-wrap .container {
                padding: 20px;
            }

            /* This should also be a block element, so that it will fill 100% of the .container */
            .content {
                max-width: 600px;
                margin: 0 auto;
                display: block;
            }

            /* Let's make sure tables in the content area are 100% wide */
            .content table {
                width: 100%;
            }
            @font-face {font-family: "Proxima Nova Rg";
                        src: url("http://db.onlinewebfonts.com/t/cc44a2fd60ec971785c2e0fdf31f2bda.eot");
                        src: url("http://db.onlinewebfonts.com/t/cc44a2fd60ec971785c2e0fdf31f2bda.eot?#iefix") format("embedded-opentype"),
                            url("http://db.onlinewebfonts.com/t/cc44a2fd60ec971785c2e0fdf31f2bda.woff2") format("woff2"),
                            url("http://db.onlinewebfonts.com/t/cc44a2fd60ec971785c2e0fdf31f2bda.woff") format("woff"),
                            url("http://db.onlinewebfonts.com/t/cc44a2fd60ec971785c2e0fdf31f2bda.ttf") format("truetype"),
                            url("http://db.onlinewebfonts.com/t/cc44a2fd60ec971785c2e0fdf31f2bda.svg#Proxima Nova Rg") format("svg");
            }
        </style>

        <body bgcolor="#f6f6f6">

            <!-- body -->
            <table class="body-wrap">
                <tr>
                    <td></td>
                    <td class="container" bgcolor="#FFFFFF">

                        <!-- content -->
                        <div class="content">
                            <table>
                                <tr>
                                    <td>
                                        <p>Dear {{$name}},</p>
                                        Please find attached invoice.
                                        <div class="margin-10"></div>
                                        <br><br>
                                                <div>Regards,</div>
                                                <div>Coding 4 developers</div>

                                                </td>
                                                </tr>
                                                <tr>
                                                    <td><img src ='<?php echo asset('email') . '/logo.png' ?>' alt='logo' width="100" /></td>
                                                </tr>
                                                </table>
                                                </div>
                                                <!-- /content -->

                                                </td>
                                                <td></td>
                                                </tr>
                                                </table>
                                                <!-- /body -->
                                                </body>
                                                </html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

/* -------------------------------------

GLOBAL

------------------------------------- */

* {

margin: 0;

padding: 0;

font-size: 100%;

line-height: 1.6;

}

img {

max-width: 100%;

}

body {

-webkit-font-smoothing: antialiased;

-webkit-text-size-adjust: none;

width: 100%!important;

height: 100%;

}

/* -------------------------------------

ELEMENTS

------------------------------------- */

a {

color: #348eda;

}

div{

font-size: 12px;

}

.margin-10{margin-top:20px; }

.btn-primary {

text-decoration: none;

color: #FFF;

background-color: #348eda;

border: solid #348eda;

border-width: 10px 20px;

line-height: 2;

font-weight: bold;

margin-right: 10px;

text-align: center;

cursor: pointer;

display: inline-block;

border-radius: 25px;

}

.btn-secondary {

text-decoration: none;

color: #FFF;

background-color: #aaa;

border: solid #aaa;

border-width: 10px 20px;

line-height: 2;

font-weight: bold;

margin-right: 10px;

text-align: center;

cursor: pointer;

display: inline-block;

border-radius: 25px;

}

.last {

margin-bottom: 0;

}

.first {

margin-top: 0;

}

.padding {

padding: 10px 0;

}

/* -------------------------------------

BODY

------------------------------------- */

table.body-wrap {

width: 100%;

padding: 20px;

}

table.body-wrap .container {

border: 1px solid #f0f0f0;

}

/* -------------------------------------

TYPOGRAPHY

------------------------------------- */

h1, h2, h3 {

color: #000;

margin: 40px 0 10px;

line-height: 1.2;

font-weight: 200;

}

h1 {

font-size: 36px;

}

h2 {

font-size: 28px;

}

h3 {

font-size: 22px;

}

p, ul, ol {

margin-bottom: 10px;

font-weight: normal;

font-size: 14px;

}

ul li, ol li {

margin-left: 5px;

list-style-position: inside;

}

/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */

.container {

display: block!important;

max-width: 600px!important;

margin: 0 auto!important; /* makes it centered */

clear: both!important;

}

/* Set the padding on the td rather than the div for Outlook compatibility */

.body-wrap .container {

padding: 20px;

}

/* This should also be a block element, so that it will fill 100% of the .container */

.content {

max-width: 600px;

margin: 0 auto;

display: block;

}

/* Let's make sure tables in the content area are 100% wide */

.content table {

width: 100%;

}

@font-face {font-family: "Proxima Nova Rg";

src: url("http://db.onlinewebfonts.com/t/cc44a2fd60ec971785c2e0fdf31f2bda.eot");

src: url("http://db.onlinewebfonts.com/t/cc44a2fd60ec971785c2e0fdf31f2bda.eot?#iefix") format("embedded-opentype"),

url("http://db.onlinewebfonts.com/t/cc44a2fd60ec971785c2e0fdf31f2bda.woff2") format("woff2"),

url("http://db.onlinewebfonts.com/t/cc44a2fd60ec971785c2e0fdf31f2bda.woff") format("woff"),

url("http://db.onlinewebfonts.com/t/cc44a2fd60ec971785c2e0fdf31f2bda.ttf") format("truetype"),

url("http://db.onlinewebfonts.com/t/cc44a2fd60ec971785c2e0fdf31f2bda.svg#Proxima Nova Rg") format("svg");

}

</style>

<tr>

<table>

<tr>

<td>

Please find attached invoice.

<div>Regards,</div>

<div>Coding 4 developers</div>

</td>

</tr>

<tr>

<td><img src ='<?php echo asset('email') . '/logo.png' ?>' alt='logo' width="100" /></td>

</tr>

</table>

</div>

</td>

</tr>

</table>

</body>

</html>

Coding 4 Developers

Running Code Website

Email invoice in PDF | Generate PDF in Laravel | MPDF

More from my site

Leave a Reply Cancel reply

More from my site

Share This:

Leave a Reply Cancel reply