angular-ui/ui-grid

PDF Images cause error on 2nd render

Open

#5,125 opened on Feb 16, 2016

View on GitHub
 (1 comment) (2 reactions) (0 assignees)JavaScript (5,395 stars) (2,496 forks)batch import
grid-exporterhelp wanted

Description

(This is rather obscure, but someone will appreciate this find).

If you pass a custom header off to exporterPdfHeader, and that header contains a base 64 image, the PDFMake will replace the base64 image with a reference to it on the first call to create the pdf.

Then, the second time you create the pdf, the referenced image will no longer be there. And this will cause the pdf creation to fail, and your user is left scratching their head!

So, to avoid this issue, send a COPY of your header object instead.

Example:

//The following creates a nice 2 column header with a logo and a rule under it all
//(although oddly, the rule only shows on page 1, but that's a different issue!)
$scope.pdfHeader = {
            "margin": 0,
            "columns":
                [
                    {
                        "table":
                            {
                                "widths": ["50%", "50%"],
                                "body":
                                [
                                    [
                                        {
                                            "width": 150,
                                            margin: [25, 20, 0, 0],
                                            image: "image/gif;base64,R0lGODdhAQAlAIAAAP///////ywAAAAAAQAlAAACBYSPqctQADs="

                                        },
                                        {
                                            margin: [10, 28, 25, 0],
                                            text: "TODO",
                                            fontSize: 22,
                                            alignment: "right"

                                        }
                                    ],
                                    [
                                        {
                                            "canvas":
                                               [
                                                   { "type": "line", "x1": 20, "y1": 5, "x2": 575, "y2": 5, "lineWidth": 1 }
                                               ]

                                        },
                                        { "text": "" }

                                    ]
                                ]

                            },
                        layout: "noBorders"

                    }
                ]

        };

gridOptions.exporterPdfCustomFormatter: function (docDefinition) {
               //you'll need this for the header to show
                docDefinition.pageMargins = [10, 80, 10, 40];   //L,T,R,B
                return docDefinition;
},

gridOptions.exporterPdfHeader: function (currentPage, pageCount) {
        /*if you send the direct object, instead of the copy (as shown), 
          the second time the pdf is made, the original image in the header object will read something line:
          'pdfimage1', instead of your nice base 64 image.  
          so, send a copy instead of the original object each time.
         */
        return angular.copy($scope.pdfHeader);      // Use COPY, NOT $scope.pdfHeader;
}

Contributor guide

PDF Images cause error on 2nd render · angular-ui/ui-grid#5125 | Good First Issue