Export to PDF Output help

Wappler General Need Help
1

I’ve a bootstrap 5 table which I want to export as PDF. In rendered pdf document the output is not visually appealing to end user. Is there any way or suggestion to use so that I can get output exactly as visible in html/UI.

This is the UI table created in bs5.3.3

image
image2658×1786 251 KB

This is generated pdf.

image
image2714×1878 311 KB

2

Are you using app connect pdf generator or a custom extension like ben's?

3

I’m using app connect pdf generator. I’ve installed ben’s custom extension in my project but didn’t try to implement that one. I don’t know that will fit in my case or not.

4

Sadly i have hever actually used the wappler App Connect PDF generator so cant really help. Perhaps it needs to go on the Wappler Virtual Academy task list

1 Like
5

Using the available real estate is the problem in your case. There is not enough room for the info that you are wanting to publish in one page.

Either use a larger page than the A4, like A3, or publish over two pages

My suggestion is to publish over multiple pages and well placing the agencies across the top and the categories along the side of an A4 page. This way you can spread the agencies across the pages.

Using my custom extension would make the task very easy allowing for headers and footers. Make sure that any CSS that is required for the styling, is placed inside the section that produces the table(s), even placing them in-line.

As an example, I have used these style rules for the table that I created for my current project:

            @media print {
                .pdf-header {
                    text-align: center;
                    margin-bottom: 30px;
                    padding-bottom: 20px;
                    border-bottom: 3px solid #d32f2f;
                }

                .pdf-header h1 {
                    font-size: 28px;
                    color: #d32f2f;
                    margin-bottom: 10px;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                }

                .pdf-company-info,
                .pdf-updated {
                    margin-top: 15px;
                    font-size: 14px;
                    color: #666;
                }

                .pdf-company-info p {
                    margin: 5px 0;
                }

                .pdf-table {
                    width: 100%;
                    border-collapse: collapse;
                    margin-top: 20px;
                }

                .pdf-table thead {
                    color: #fff;
                    background-color: #666;
                }

                .pdf-table tr {
                    border: 1px solid #ddd;
                    padding: 12px 12px 8px;
                    text-align: left;
                    font-size: 14px;
                    text-transform: uppercase;
                }

                .pdf-table thead tr {
                    border: none;
                }

                .pdf-table th {
                    padding: 12px 12px 8px;
                    text-align: left;
                    font-size: 14px;
                    /* border: 1px solid #ddd; */
                    text-transform: uppercase
                }

                .pdf-table td {
                    padding: 12px 12px 8px;
                    /* border: 1px solid #ddd; */
                    font-size: 14px;
                }

                .pdf_footer {
                    margin-top: 30px;
                    font-size: 12px;
                    color: #999;
                    text-align: center;
                }

                /* First column 1/3 width for all tables */
                .pdf-table th:first-child,
                .pdf-table td:first-child {
                    width: 35%;
                }
            }

Edit: Thinking about this, try using the suggested layout and style rules for the component that you are presently using, it may work.