Laravel Ajax submit form to dompdf print out in new tab

in Laravel framework I have downloaded the package domPDF. The way I wanted to generate the PDF report are:

1. User submit a form
2. The form data will pass through the route Route::post('/customers/pdf', 'AjaxController@export_pdf')->middleware('auth');
3. The function export_pdf in AjaxController will get the form data and process in database.
4. Once database process complete will pass the query result to mypdf.blade.php. So far the PDF output is successful but unable to combine with the form data from the front end.

Below are the codes of the views and controller. Thanks in advance.

web.php

Route::post('/customers/pdf', 'AjaxController@export_pdf')->middleware('auth');

report.blade.php

<form method="post" id="FormReport">
    <div class="form-group">
        <label class="d-block" for="mobilenumber">Step 1 - Report Type</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <i class="mdi mdi-pencil-outline input-group-text" aria-hidden="true"></i>
            </div>
            <select class="form-control" id="reporttype" name="reporttype" required>
                <option value="" disabled selected></option>
                <option value="1">Report A</option>
            </select>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="form-group mb-0">
                <label class="d-block">Step 2 - Select Dates</label>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label class="d-block" data-target="#fromdate" data-toggle="datetimepicker">From Date</label>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <i class="mdi mdi-pencil-outline input-group-text" aria-hidden="true"></i>
                    </div>
                    <input type="text" class="form-control datetimepicker-input" id="fromdate" name="fromdate" data-toggle="datetimepicker" data-target="#fromdate" required />
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label class="d-block" data-target="#todate" data-toggle="datetimepicker">To Date</label>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <i class="mdi mdi-pencil-outline input-group-text" aria-hidden="true"></i>
                    </div>
                    <input type="text" class="form-control datetimepicker-input" id="todate" name="todate" data-toggle="datetimepicker" data-target="#todate" required />
                </div>
            </div>
        </div>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-success mt-3">Generate</button>
    </div>
</form>

<script type="text/javascript">
    $(document).ready(function() {
        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

        $('#fromdate, #todate').datetimepicker({
            format: 'YYYY-MM-DD'
        });

        $(document).on('submit', '#FormReport', function(e) {
            e.preventDefault();

            $('.pre-loader').show();

            var form = $(this);
            var formData = new FormData(form[0]);

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: '/customers/pdf',
                type: "POST",
                data: formData,
                dataType: 'json',
                contentType: false,
                processData: false,
                cache: false,
                success: function(data) {
                    // How should I proceed here?
                },
                error: function(xhr, ajaxOptions, thrownError) {
                    console.log('Error', xhr);
                },
                complete: function(c) {

                }
            });

        });
    })
</script>

AjaxController@export_pdf

public function export_pdf(Request $request)
{
    $fromdate = $request->input('fromdate');
    $arr_products = $arr_product = array();

    try {
        $rs_product = DB::select("select a.prod_desc, a.prod_location from product_store a where a.created_date >= ?", [$fromdate]);
        $numrow_product = count($rs_product);

        if ($numrow_product > 0) {
            foreach ($rs_product as $row_product) {
                $prod_desc = $row_product->prod_desc;
                $prod_location = $row_product->prod_location;

                $arr_product['prod_desc'] = $prod_desc;
                $arr_product['prod_location'] = $prod_location;

                $arr_products[] = $arr_product;
            }
        }
    } catch (\Illuminate\Database\QueryException $ex) {
        $this->error['form-message'] = 'ERR' . __LINE__ . ': Report is unavailable';
    }

    if ($this->error == '') {
        $data = ['title' => 'Product In Store', 'productlist' => $arr_products];
        /* I think this part has to do with the output of PDF? */
        $pdf = PDF::loadView('mypdf', $data);
        return $pdf->stream('productinstore_'.date('YmdHis').pdf');
    }
}

mypdf.blade.php

@guest
@else
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <table class="content" width="100%">
        <thead>
            <tr>
                <th>Description</th>
                <th>Location</th>
            </tr>
        </thead>
        <tbody>
        @foreach ($productlist as $products => $product)
        <tr>
        <td></td>
        <td></td>
        <tr>
        @endforeach
        </tbody>
    </table>
</body>
</html>
@endguest

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2n6yaHB
via IFTTT