How to use laravel snappyPDF on localhost:8000/storage/file.html?

I'm currently trying to generate a pdf from an html file with snappy laravel. When I call my to pdf method, my server freeze and output a 60sec timeout error. I've read in this github issue that wkhtmltopdf doesn't like using port 8000, I was wondering if there was any work around for this, I've tryed to print google.com as pdf and it's working...

Also I can't print pdf from my html file content (content stored in variable), I guess it's because of the css files, here's an example of what I'm doing:

$snappy->generate('http:localhost:8000/storage/file.html', $fileName.'.pdf');

here's file.html content.

<div class="pdfContainer">
    <meta charset="UTF-8">
    <link href="http://localhost:8000/css/pdfpreview.css" rel="stylesheet" type="text/css">
    <div class="headerPreview">
        <img src="http://localhost:8000/image/logo.png">
        <div class="soumissionInfoContainer">
            <div>
                <strong>Soumission # </strong>
                <strong>Projet :</strong>
                <strong>Date : </strong>
            </div>
            <div>
                <p> S1-17</p>
                <p>Garage de béton</p>
                <p> 20-02-2017</p>
            </div>
        </div>
        <div class="infoComp">
            <p>2236, rue de l'Ardoise, Jonquière (QC) G8A 0A5</p>
            <p>Saguenay : 418-550-5382 Alma : 418-719-0588</p>
            <p>R.B.Q.: 5670-0578-01</p>
        </div>
        <h2>SOUMISSION</h2>
        <div class="clientInfoContainer">
            <div style="width:70px;"><p style="font-size: 12px;text-align: right">Destinataire: </p>
            </div>
            <div>
                <p>Jean Tremblay</p>
               <p>1010 St Hubert
                    , G7H 2B1</p>
                <p>418 555 5555</p>
            </div>
    </div>
    </div>
<table class="previewTable" id="previewTable">
    <tbody>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <th>Quantité</th>
        <th>Description</th>
        <th>Prix</th>
    </tr>
    <tr>
        <td></td>
        <td>
            <textarea id="title1" onchange="setInnerHTML('title1')"
                      style="font-size: 2em; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; height: 99px;">Excavation lol</textarea>
        </td>
        <td><textarea id="total1" onchange="setInnerHTML('total1')"
                      style="background: rgba(0,0,0,0); width: 100px; height: 70px">919.51</textarea>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <textarea id="desc1" onchange="setInnerHTML('desc1')" style="resize: horizontal; width: 553px;" rows="5"
                      cols="50" title="">                            this is working</textarea>
        </td>
    </tr>
    </tbody>
</table>
<script>
    function setInnerHTML(id) {
        var area = document.getElementById(id);
        area.innerHTML = area.value;
    }
</script>
<textarea class="totalSoumission" id="totalSoumission" onchange="setInnerHTML('totalSoumission')">TOTAL AVANT TAXES: 919.51 $</textarea>
    <div class="ligne_signature">
        <p>À la signature, ce devis est bon pour travaux et valide 90 jours</p>
    </div>
</div>

the main thing that concern me is that when I get the message output error, I copy and paste the exact command and paste it in my terminal and the pdf is generated in less than a second, so this mean that there's really a problem with my snappy pdf usage...

Solution

The reason why snappy was failing was because wkhtmltopdf doesn't like using current host ressources. You can't fetch anything from your host while using wkhtmltopdf. You need to convert your image in URI so you don't fetch them from you public directory, and you need to insert your css in your html, link won't do it. For myself I've used blade to keep css separate from my page. The main reason in my case why this was failing was because I was trying to fetch a ccs sheet from 127.0.0.1:8000 (my current host).

Problem:

 <link href="http://localhost:8000/css/pdfpreview.css" rel="stylesheet" type="text/css">

Solution:

<style>
...
</style>