angular-ui/ui-grid

PDF Images cause error on 2nd render

Open

#5,125 建立於 2016年2月16日

在 GitHub 查看
 (1 留言) (2 反應) (0 負責人)JavaScript (5,395 star) (2,496 fork)batch import
grid-exporterhelp wanted

描述

(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;
}

貢獻者指南