Laravel Dompdf taking too long to download pdf - laravel

I want to make a pdf invoice from blade template using Dompdf in Laravel 5.5.
The problem is when clicking on the download button the page is loading and after ~3 min i the pdf starts downloading.
Why is it taking so long?
the download link
<i class="fa fa-file-pdf-o"></i> Download Invoice
web route:
Route::get('/order/download-invoice/{OrderID}', 'Admin\AdminOrderController#downloadOrderInvoice')->name('admin.download-invoice');
a simple template (invoice.blade.php)
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other
head content must come *after* these tags -->
<title>Invoice</title>
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}" media="screen">
</head>
<body>
<div>{{ $invoice->InvoiceTitle }} </div>
</body>
</html>
donwload invoice controller function:
use Barryvdh\DomPDF\Facade as PDF;
public function downloadOrderInvoice($OrderID){
$invoice = Invoice::where('OrderID', $OrderID)->first();
$pdf = PDF::loadView('invoice.invoice', compact('invoice'))->setPaper('a4', 'landscape');
return $pdf->download('invoice.pdf');
}
What i did wrong? Did i miss something?
UPDATE
clear the header and using EXTERNAL CDN bootstrap works.
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
Why is not using the local bootstrap using asset???
<link href="{{asset('css/bootstrap.min.css')}}" rel="stylesheet">

Related

How to add a leafleat map when generating a pdf with thymeleaf?

I have a spring boot app that generates a pdf with itext,
I'm trying to add a map when generating it.
I didn't find any way to add the leaflet.
my example:
<!DOCTYPE html>
<html xmlns:th="http://www.springframework.org/schema/mvc">
<head>
<title>Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="mapid" style="width: 100%; height: 750px;"></div>
<script th:inline="javascript">
var mymap = L.map('mapid').setView([0, 0], 4);
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Corona Virus'
}).addTo(mymap);
</script>
</body>
</html>
any suggestion?
as far as I know, it is not possible to save as pdf the result of the javascript code. I suggest that you look how to get the map as an image and then you can pass the url of that image (or base64 encoding) to your template and convert to pdf.
Check example usages: http://sampleserver1.arcgisonline.com/arcgis/sdk/rest/export.html

How to use Stripe Element Into Laravel Blade

I have a Laravel project. I want to add Stripe payment system in my Laravel app. In stripe there is js Element but unfortunately I cannot use it in blade files. Can anyody help me suggest other way to do this?
<!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.0">
<title>Stripe Payment</title>
</head>
<body>
<!-- Mount the instance within a <label> -->
<label>Card
<div id="card-element"></div>
</label>
<!--
Or create a <label> with a 'for' attribute,
referencing the ID of your container.
-->
<label for="card-element">Card</label>
<div id="card-element"></div>
<script src="https://js.stripe.com/v3/"></script>
<script>
var stripe = Stripe('pk_test_....');
const elements = stripe.elements();
const cardElement = elements.create("payment", {"clientSecret": "sk_test_...."});
cardElement.mount('#card-element');
</script>
</body>
</html>

Error finding assets when running laravel artisan in host

I'm using Laravel 8 and trying to host my project to public localhost using php artisan serve --host '0.0.0.0' --port 8080 so I can access it from another device, but got the error message:
GET <ip>:8080/css/app.css net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)
GET <ip>:8080/js/app.js net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)
I've used laravel mix and stored them in public/css and public/js. Here is my base laravel blade template code.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css">
<title>{{ config('app.name') }}</title>
</head>
<body>
#include('layouts.navbar')
#yield('content')
<script src="{{ asset('js/app.js') }}" defer></script>
</body>
</html>
I've also tried adding ASSET_URL=public in .env file, but still not working. Any help would be much appreciated, thank's in advanced!

Cannot load assets on live server using the mix helper function

I am trying to run my application via a tunnel service (https://localtunnel.github.io/www/), but it sets the relative path to local which makes it so that my assets can't get loaded.
What I have tried:
changing the mix helper to the assets helper -> works, but makes me unable to use the npm hot reload function. I would like to make use of this.
My blade file:
<!DOCTYPE html>
<html>
<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="csrf-token" content="{{csrf_token()}}">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<title>Laravel Vue Ecommerce</title>
<link href=" {{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<app></app>
</div>
<script src="{{ mix('js/bootstrap.js') }}"></script>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
webpack.mix.js:
mix.js('resources/js/app.js', 'public/js').vue()
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps()
The errors:
GET https://localhost:8080/css/app.css net::ERR_BLOCKED_BY_CLIENT
tame-dog-60.loca.lt/:16
GET https://localhost:8080/js/bootstrap.js net::ERR_BLOCKED_BY_CLIENT
tame-dog-60.loca.lt/:17
GET https://localhost:8080/js/app.js net::ERR_BLOCKED_BY_CLIENT

laravel and webpack transform reactjs not reloading

I am having trouble getting hot reloading to work with my laravel app.
//laravel homepage
<!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">
<title>Laravel</title>
</head>
<body>
<div id="root"></div>
<?php
if (App::isLocal()):
?>
<script type="text/javascript" src="http://localhost:3000/static/bundle.js"></script>
<?php else: ?>
<script type="text/javascript" src="/dist/bundle.js"></script>
<?php endif; ?>
</body>
</html>
When I go to my homestead laravel backend page (localhost:8000), everything works fine, but there's no hot reloading when I change react components.
When I go directly to the dev-server http://localhost:3000 I get hot reloading.
I am using the react transform boilerplate: https://github.com/gaearon/react-transform-boilerplate
How can I get the backend laravel page to reload the bundle?
change
src="http://localhost:3000/static/bundle.js"
to
src="{{url('static/bundle.js)'}}"
and
src="/dist/bundle.js"
to
src="{{url('/dist/bundle.js')}}"

Resources