Having Issue with PDF Generation

brad · June 29, 2022, 6:06am

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!

hillel · June 29, 2022, 6:33am

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?

brad · June 29, 2022, 6:57am

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?

hillel · June 29, 2022, 7:03am

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

brad · June 29, 2022, 7:09am

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/#/

brad · June 29, 2022, 7:20am

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?

hillel · June 29, 2022, 7:41am

@david any thoughts?

david · June 29, 2022, 9:12am

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=*

brad · June 29, 2022, 9:14pm

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.

david · June 30, 2022, 2:17am

@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.

brad · June 30, 2022, 4:11am

@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:

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?
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.

hillel · June 30, 2022, 4:28am

Hi,

This is currently only supported in the web app.
@david?

david · June 30, 2022, 11:24pm

@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

brad · July 1, 2022, 12:00am

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.

brad · July 1, 2022, 12:09am

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:

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.
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.

david · July 1, 2022, 12:23am

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.

brad · December 7, 2022, 10:21pm

Hello @hillel and @david

I hope you are both well! I updated to the latest versiopn of Invoice Ninja yesterday and it seems my PDF Generation isn’t working anymore. The Live Preview in Web Browser and App is working but when you select ‘View PDF’ or ‘Download PDF’ nothing loads.

Last time you mentioned loading in a web browser and looking at the console to see if there are any errors. What I can see here are some errors that say:

‘Failed to load resource: net::ERR_NAME_NOT_RESOLVED’

The resource it is referencing uses this URL:

http://in5.test:8000/client/invoice/UuC3m2e1UwTfROLppGoMi8U9np33vTIq/download?t=1670450658200&t=1670450658200

Using http://in5.test:8000 is the old URL before I changed it last time to http://192.168.0.142:8000. Not sure if there is something in the latest update that requires a refresh of this value someone, maybe the old one was cached?

When the console is active the Live Preview in Web Browser doesn’t load, but when the console is disabled the Live Preview works.

Last time this occurred I swapped out the APP_URL in the env file to this:

‘APP_URL=http://192.168.0.142:8000’

I check the env file and nothing as changed there. I also checked the IP Address of the machine that is running the Docker Container and it is still using the same Local IP Address.

Any other ideas of what I should try?

Thank you!

brad · December 8, 2022, 6:46am

@david

I have done a little bit more digging on this, I rolled back my Invoice Ninja Docker Image through a bunch of different versions and tested ‘View PDF’ and ‘Download PDF’ each time, no other files or configs were changed. These were my results:

5.5.32 - Working
5.5.38 - Working
5.5.40 - Working
5.5.41 - Working
5.5.42 - Not Working
5.5.43 - Not Working

So it would seem something has changed between 5.5.41 → 5.5.42 that has broken the PDF Generation for me. I had a look at the release notes for V5.5.42 and couldn’t see anything that jumped out to me as the cause for the problem. Any ideas?

david · December 8, 2022, 7:02am

not sure what is happening here and not sure how I can explain this one:

When the console is active the Live Preview in Web Browser doesn’t load, but when the console is disabled the Live Preview works.

Are you using the standard snappdf generation ? phantom ? or hosted_ninja

hillel · December 8, 2022, 7:20am

I’m guessing PhantomJS

A few other users have reported that it’s stopped working around then, ie.