Export questions...

ztevie

I've started with export functionality in my project. Mainly print and pdf... But some questions arise...
1. When printing, I don't get all columns, I have some fields in child rows and they don't show. I even get the plus icon for child rows showing, it's more like an image of the screen than a printout of data? EDIT: When saving print to file all columns do show, I have to find a way to show them in preview aswell.
2. In print, I also get a black background where title and message is, with purple text? I understand it has something to do with css, maybe from bootstrap or somewhere else. Is there a way to ignore css-rules on the page? EDIT: OK, see now, when I save the print as file it looks ok without the black background and all that, so I assume only the preview uses some css in my project?
3. Is there no way to center align contents in the cells (and headers)? Now everything is left aligned in both.
4. Print preview is 100% width, but not the pdf. Can I make width 100%?

I really tried to search and there are questions for the same things, but no clear answer anywhere that I can find..... Sorry if I missed something already posted regarding this...

`Printscreen on PRINT:
https://1drv.ms/i/s!Ao82Rnw9yWNrgzyRbCDzomUEiBQR

My buttons look like this on client side editor:

buttons: [
            { extend: 'create',
                editor: editor,
                text: '<i class="fa fa-user-plus"></i> Ny användare',
                formTitle: '<i class="fa fa-user-plus"></i> Skapa ny användare',
                formButtons: [{
                        label: '<i class="fa fa-undo"></i> Avbryt',
                        fn: function() { this.close(); }
                },
                '<i class="fa fa-floppy-o"></i> Spara'
            ]
            },
            { extend: 'collection',
                text: '<i class="fa fa-download"></i> Exportera',
                autoClose: true,
                buttons: [
                    { extend: 'copy', 
                        text: '<i class="fa fa-clipboard"></i> Kopiera',
                        title: function (){
                            return 'Användare Team Tillredning' + searchVal;
                        },
                        message: moment($.now()).format("YYYY-MM-DD HH:mm")
                    },
                    { extend: 'excel', 
                        text: '<i class="fa fa-file-excel-o"></i> Excel',
                        title: function (){
                            return 'Användare Team Tillredning' + searchVal;
                        },
                        message: moment($.now()).format("YYYY-MM-DD HH:mm")
                    },
                    { extend: 'csv', 
                        text: '<i class="fa fa-clipboard"></i> CSV'
                    },
                    { extend: 'pdf', 
                        text: '<i class="fa fa-file-pdf-o"></i> PDF',
                        title: function (){
                            return 'Användare Team Tillredning' + searchVal;
                        },
                        message: moment($.now()).format("YYYY-MM-DD HH:mm"),
                        exportOptions: {
                            columns: '1,3,5',
                            stripHtml: true
                        }
                    },
                    { extend: 'print', 
                        text: '<i class="fa fa-clipboard"></i> Skriv ut',
                        title: function (){
                            return 'Användare Team Tillredning' + searchVal;
                        },
                        message: moment($.now()).format("YYYY-MM-DD HH:mm"),
                        addClass: 'compact',
                        exportOptions: {
                            columns: '1,3,5',
                            stripHtml: true
                        }
                    }
                ]
            }
        ]

allan

1. When printing, I don't get all columns, I have some fields in child rows and they don't show

There is no option to export the child rows at the moment I'm sorry to say.

1. In print, I also get a black background where title and message is, with purple text? I understand it has something to do with css, maybe from bootstrap or somewhere else. Is there a way to ignore css-rules on the page? EDIT: OK, see now, when I save the print as file it looks ok without the black background and all that, so I assume only the preview uses some css in my project?

We'd really need a link to the page showing the issue to understand where this is coming from. But the print view includes the CSS from your table's page.

1. Is there no way to center align contents in the cells (and headers)? Now everything is left aligned in both.

Probably - although I don't actually see it in the pdfmake documentation. That would be one for their support channels.

1. Print preview is 100% width, but not the pdf. Can I make width 100%?

No - that's a limitation of the pdfmake library that is used.

Allan

ztevie

I managed to solve the pdf issues by studying pdfmake docs and console.log(doc). Here's how for later reference.

Regarding full width table: You can set width for each column, so if you know how many columns you export it's easy. You can choose between auto(adjust column to longest value), Firm width, for example 100(don't know if it's pixels?)
And finally * (use the rest of the width after auto and firm width been set). You can use several or even all *, but then all * columns will share width between them, disregarding value length.
So I set all to auto, and the last column to *. That way all columns adjusts to theit values and the last get the rest, thus full width table.

Regarding align center: This has to be set on each specific cell, so I looked thru the console.log(doc) to find where the values are actually stored and then loop thru that array of rows, setting center to column 2 and 4.
Note that the real rows start on array 1, array 0 is the header row.

Here's the customized button:

{ extend: 'pdf', 
                        text: '<i class="fa fa-file-pdf-o"></i> PDF',
                        title: function (){
                            return 'Användare Team Tillredning ' + searchVal;
                        },
                        message: moment($.now()).format("YYYY-MM-DD HH:mm"),
                        addClass: 'compact',
                        exportOptions: {
                            columns: '0, 1, 2, 3, 4, 5, 6'
                        },
                        customize: function (doc){
                            doc.content[2].table.widths = ['auto', 'auto', 'auto', 'auto', 'auto', 'auto', '*'];
                            alert(eTable.page.info().recordsDisplay);
                            for (var i = 1; i < eTable.page.info().recordsDisplay+1; i++) {
                                doc.content[2].table.body[i][2].alignment = 'center';
                                doc.content[2].table.body[i][4].alignment = 'center';
                            }
                        }
                    }

allan

Superb - thank you for sharing this knowledge with us!

Allan

ztevie

I'm happy to report that I found a solution to at least one of the print issues. The black background with purple text is now white and black as desired... I just set a css property in the customize section.
Like so:

{ extend: 'print', 
   text: '<i class="fa fa-clipboard"></i> Skriv ut',
   title: 'Användare Team Tillredning ',
      message: function(){
         var addMsg = "";
            if(searchVal !== ""){
               addMsg = ", (" +
               $('.selectpicker :selected').parent().attr('label') +
               ": " + searchVal + ", " +
               eTable.page.info().recordsDisplay + " st)";
           }
           return moment($.now()).format("YYYY-MM-DD HH:mm") + addMsg;
   },
      addClass: 'compact',
      exportOptions: {
         columns: '0, 1, 2, 3, 4, 5, 6'
     },
     customize: function ( win ) {
        $(win.document.body)
           .css( 'background-color', 'white' )
    }
 }