Having Issue with PDF Generation

brad · June 30, 2022, 4:11am

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.

brad · December 8, 2022, 7:43am

I am now running 5.5.41 which does generate PDFs properly. In this version when I open in the same browser and toggle the console to ON the Live Preview doesn’t load, same behaviour as before, this must be seperate to the change in 5.5.41 → 5.5.42 that is causing PDFs to not generate.

Though I don’t think the Live PDF Preview not running when the console is enabled is much of a problem as I normally use the Invoice Ninja App and not via Web Browser. And if running in the Web Browser it would be not common to have the console open I would think.

I am running self hosted on a local computer and am using the default PDF Generator, I just checked my env file and it’s ‘snappdf’.

brad · February 22, 2023, 11:41pm

@david @hillel

Did you have an update on this by any chance? I just updated to 5.5.71 to see if anything had changed. In the macOS App when I press ‘View PDF’ I get this error:

SocketException: Failed host lookup: ‘in5.test’ (OS Error: nodename nor servname provided, or not known, errno = 8)

Thank you!

hillel · February 23, 2023, 7:08am

Is the PDF working in the web app or the client portal?

brad · February 23, 2023, 7:55am

I don’t run a client portal but in the web app it is not working.
The error that returns is: XMLHttpRequest error.

If I open Developer Tools in the browser and select View PDF this is what the console shows:

main.foss.dart.js?v=5.5.74:94006
GET http://in5.test:8000/client/invoice/YwIwA3wqKuKJLlwyg4f9IabN8b7sahyi/download?t=1677138984758&t=1677138984758 net::ERR_NAME_NOT_RESOLVED

When I look at main.foss.dart.js?v=5.5.74 under sources it shows Line 94006 having the error with this code:

iJ(a,b){return a.send(b)},

hillel · February 23, 2023, 8:00am

Is the URL correct? You may need to change the APP_URL value in the .env file.

brad · February 23, 2023, 8:02am

The APP_URL is as follows:

APP_URL=http://192.168.0.142:8000

The App URL worked fine in V5.5.41, after that it’s broken. Just running on a local network in a Docker Container. Am I doing something wrong with the App URL?

hillel · February 23, 2023, 8:26am

@david do you have any suggestions?

david · February 23, 2023, 8:56am

the app looks like it is configured for a different URL

main.foss.dart.js?v=5.5.74:94006
GET http://in5.test:8000/client/invoice/YwIwA3wqKuKJLlwyg4f9IabN8b7sahyi/download?t=1677138984758&t=1677138984758 net::ERR_NAME_NOT_RESOLVED

http://in5.test:8000

you may need to add in5.test to your hosts file in /etc/hosts and point it to your IP address.

brad · February 23, 2023, 9:14pm

Thanks @david

I’ve figured out the issue. The only place ‘in5.test:8000’ appears anywhere is Invoice Ninja → Settings → Client Portal → Domain URL. So I changed the value there to ‘http://192.168.0.142:8000’ which is identical to the ‘APP_URL’ in the env file.

I wasn’t aware that I was using the Client Portal. I’ve now updated to the latest version and the PDF Generation is working when I select ‘View PDF’. Weird that it worked with the old values on V5.5.4.1, something must have changed.

david · February 23, 2023, 9:54pm

@brad

Ok this makes sense. We implemented the client portal override in between those two releases that allows users to select the domain their serve their client portal from.