Having Issue with PDF Generation

Hello All,

I hope you are all well!

I’m running Invoice Ninja locally via docker-compose. The Docker Container is running and I can access it on the local network on all platforms (web, macOS App, iOS App).

The PDF Previews both seem to work. When I say both I mean the one in Settings → Invoice Design → Customise and Preview as well as the one in Invoices → Select Invoice → Edit Record → Scroll Down.

However, when I click on an invoice and select Edit Invoice there are two PDF Buttons up the top. When I press ‘View PDF’ it opens what I assume is a PDF Window but it just shows a spinning wheel forever. When I press the ‘Print PDF’ Button in the same screen it introduces a progress bar at the top of the UI and that just infinitely shows progress but never finishes, the only way I got this to cancel was to stop the Docker Container.

Is this normal behaviour? If so, how do I export a PDF? Because the only way I can figure out how to do it given those buttons don’t work for me is to tap the Share Icon in the PDF Preview and export a PDF to Notes, but this preview shows “Invoice Number: Live Preview #203” so it can’t really be used to generate a PDF to be sent to a client.

Thank you!

Hi,

When testing in the web app are there any errors in the network tab of the browser console?

Also, are you able to view the PDF in the client portal?

Thanks Hillel!

When using the Web App via a Browser there are no errors that are showing:

I believe I have Client Portal Disabled as I have no intention of using it. However when I click on the Client Portal Button I get a ‘This site can’t be reached’ error saying ‘in5.test’s DNS address could not be found. Diagnosing the problem. DNS_PROBE_POSSIBLE’, I believe this happened before I had it disabled. Is that perhaps the problem?

Can you check the APP_URL value is correct in the .env file?

Yes, I believe that is correct:
APP_URL=http://in5.test:8000

Or should it be set to the URL which gives me the Invoice Ninja Website?
http://192.168.0.142:8000/#/

Okay, I swapped out the APP_URL in the env file to this:
APP_URL=http://192.168.0.142:8000

And the PDF Buttons now work, both the View PDF and Print PDF, thank you hillel!

I did notice that the Generated PDFs don’t respect some of the CSS Values that I have setup in my custom template though. For example I have a few CSS Values like this:

[data-ref=“client_details-client.name”],
[data-ref=“company_details-company.name”] {
font-weight: bold;
}

Client Name and Company Name are bold in both PDF Preview Windows, but when it is generated there is no Bold applied. Any ideas on that front?

@david any thoughts?

Is this running behind some kind of proxy?

the system needs to be able to resolve itself via DNS…

If you are behind a proxy, you will need to use in the .env file TRUSTED_PROXIES=*

Hi David,

No, no proxy that I am aware of. It’s just running on a standard home wifi network.

How can I test if the system is indeed able to resolve itself via DNS? That way we can rule that out as the cause of the CSS not passing through.

@brad

Can you confirm if the bold does not appear if you create a brand new invoice? i think your system may be caching and displaying old PDFs. We only update the PDF when a value in the invoice changes, rather than just the style of the pdf.

@david

I didn’t realise about the caching, thank you for that information. I was messing around with changing descriptions in some line items earlier on to explore the markdown functionality and that seems to have re-created the PDF and re-populated the cache. The specific CSS implementations I’ve made are now working. Thank you!

I did have a two other questions:

  1. I’ve looked at the docs and it says there should be a ‘Draft Mode’ toggle switch when you are editing a PDF template. Using the macOS App and iPad App I can not see this toggle switch and thus can not inspect any elements to find their corresponding values. Is this expected behaviour? Or is Draft Mode only available in a web browser?

  2. Is there are way to alter the Page Number positioning with CSS? I downloaded the source and did a search to see if I could find anything that indicated what it might be called internally but couldn’t find anything. I would love to lift it up a little higher as I feel it’s too close to the bottom.

Hi,

  1. This is currently only supported in the web app.

  2. @david?

@brad

if you open the file at

App\Utils\Traits\Pdf\Pdf.php

You’ll want to look at this method:


    function Footer()
    {
        $this->SetXY(0, -5);
        $this->SetFont('Arial','I', 9);
        $this->SetTextColor(135,135,135);

        $trans = ctrans('texts.pdf_page_info', ['current' => $this->PageNo(), 'total' => '{nb}']);
        $this->Cell(0,5, $trans ,0,0, $this->text_alignment);

    }

You can adjust the SetXY values to suit your preference

Thanks for that @hillel, great to know that functionality is exclusive to when it’s running on a browser. I just took a look then and it seems like it’d be quite useful.

Thank you @david, I appreciate that. So it would seem that this change could only be done to the source and not via CSS? I’m running Invoice Ninja from a Docker Container so it doesn’t seem like it’d be easy to do as I’d need to download the source, change the SetXY in the code, re-build the app and figure out how to put that in a Custom Docker Container.

I tried adding this to the CSS as a test:

[data-ref*="texts.pdf_page_info"] {
    color: blue;
}

[data-ref*="pdf_page_info"] {
    color: blue;
}

It didn’t work, so I’m assuming that this can not be altered.

I was also having an issue where the Page Break wouldn’t work correctly. Say I have an invoice with 10-15 Line Items, then I use the Public Notes Section to provide information on the job, this section is usually 10 Lines. What was happening is that the Public Notes Section and the Totals Section would span over the page break and split in a weird way cutting off a lot of information.

The solution I figured out was to change this in the CSS:

#table-totals {
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 80px;
    padding-top: 2rem;
    padding-left: 2rem;
    padding-right: 0rem;
    page-break-inside:avoid;
    overflow: visible !important;
}

The two key points were these:

  1. page-break-inside:avoid; This mean that if the entire Public Notes or Totals would not fit on a page they would move to the next page down.
  2. padding-top: 2rem; This didn’t actually exist in the Original CSS of the template but without it the PDF would not have appropriate padding at the top when it creates a new page, it would draw the first line of text from Public Notes off the page so it would be cut off. The only quirk I’ve found with this is that 2rem is too much padding when you only have 4-5 Line Items as the whole invoice then fits on one page. What it really needs to be is if ‘page break’ then ‘2rem’ else ‘0rem’ or something like that but I haven’t been able to figure out how to do that.

Correct, unfortunately CSS spec doesn’t allow page numbering, so we need to rely on a separate binary for this function, the tradeoff is we lose the ability to adjust positioning without hardcoding.