How to view and inspect a Commerce Billy invoice pdf template as HTML, before it's passed to the PDF generator?

Question

I'm trying to customise a Commerce Billy pdf invoice template. I've seen Custom PDF template in Commerce Billy which tells me what I need to know about which files to edit to do this.

What I can't see how to do is, see the template as rendered by HTML before it's converted into a PDF. I need to do this to see what CSS classes are being applied where, and because testing changes to the HTML and CSS layout is much easier in HTML and CSS using inspect element tools than constantly re-generating PDFs.

How can I see a Commerce Billy PDF template as it is rendered as HTML before it is passed to the PDF generator? Right now, I'm just guessing about how the rendered PDF will look when I make changes, then repeatedly re-rendering PDFs, which is an inefficient way of working. I'd like to be able to try different CSS changes using developer tools in a browser, then apply those changes to a file and check they apply cleanly, then generate test PDFs.

Answer 1

If you check the page callback of PDF URL (i.e. "invoice-pdf/%commerce_order"), the HTML output of Invoice PDF is generated using commerce_billy_pdf_html($order) function. Same function is used by Print Invoice URL (i.e. "invoice-pdf/%commerce_order/print") to generate Printable output of Invoice. Since print page render HTML output you can inspect the output easily.

So for example, if your order number is 1 and your Invoice PDF URL is "invoice-pdf/1", then you can see the HTML Structure of PDF Output by going to "invoice-pdf/1/print" page.

Hope this helps.