货币符号在angularjs UI Grid的PDF视图中显示为null

368yc8dk  于 2023-11-16  发布在  Angular
关注(0)|答案(2)|浏览(131)

我在我的.netcore mvc 5项目中开发了如下的angularjs UI网格,但是当我将网格数据导出到pdf文档时,货币符号在Total和discount列中显示为null。


的数据
当我点击“导出所有数据为pdf”菜单右上角的网格,PDF文件显示如下。



我的源代码在下面。

<environment include="Development">
    <script type="text/javascript" src="~/lib/angular.js/angular.js"></script>
    <script type="text/javascript" src="~/lib/angular-ui-grid/ui-grid.js"></script>
    <script type="text/javascript" src="~/lib/angular-ui-bootstrap/ui-bootstrap.js"></script>
    <script type="text/javascript" src="~/lib/angular-ui-bootstrap/ui-bootstrap-tpls.js"></script>
    <script type="text/javascript" src="~/lib/angular-animate/angular-animate.js"></script>
    <script type="text/javascript" src="~/lib/pdfmake/pdfmake.js"></script>
    <script type="text/javascript" src="~/lib/pdfmake/vfs_fonts.js"></script>
    <link rel="stylesheet" type="text/css" href="~/lib/angular-ui-grid/ui-grid.css" />
    <link rel="stylesheet" type="text/css" href="~/lib/angular-ui-bootstrap/ui-bootstrap-csp.css" />
</environment>
<script type="text/javascript">       

    var app = angular.module("uigridApp", ["ui.grid", "ui.grid.pagination", "ui.grid.selection", "ui.grid.exporter", "ui.bootstrap"]);

    app.controller("uigridCtrl", function ($scope, $http, uiGridConstants, $templateCache) {
        $scope.datePicker = {
           //.........................
        };
        $scope.showDatePopup = [];
        $scope.showDatePopup.push({ opened: false });
        $scope.showDatePopup.push({ opened: false });
        $templateCache.put('ui-grid/date-cell',
           // ..................
        );
        $templateCache.put('ui-grid/ui-grid-date-filter',
           // ........................
        );
        $scope.highlightFilteredHeader = function (row, rowRenderIndex, col, colRenderIndex) {
           // ..........................
        };

        $scope.orderstatus = [{value:'Order',label:'Order'},{value:'SalesOrder',label:'SalesOrder'},{value:'Cancelled',label:'Cancelled'}];
        $scope.gridOptions = {
            enableFiltering: true,
            enableSorting: true,
            paginationPageSizes: [25, 50, 75],
            paginationPageSize: 25,
            columnDefs: [
                {
                    field: 'CustomerName',
                    //.....................
                },
                {
                    field: 'OrderNo',
                    //.....................
                },
                {
                    field: 'OrderStatusText',
                   //.....................
                },
                {
                    field: 'OrderDate',
                    //.....................
                },
                {
                    field: 'Total',
                    width: '10%',
                    cellFilter: 'currency',
                    cellClass: 'gridcell-text-right',
                    filters: [
                        {
                            condition: uiGridConstants.filter.GREATER_THAN_OR_EQUAL,
                            placeholder: 'greater than or equal'
                        },
                        {
                            condition: uiGridConstants.filter.LESS_THAN_OR_EQUAL,
                            placeholder: 'less than or equal'
                        }
                    ]
                },
                {
                    field: 'Discount',
                    width: '10%',
                    cellFilter: 'currency',
                    cellClass: 'gridcell-text-right',
                    filters: [
                        {
                            condition: uiGridConstants.filter.GREATER_THAN_OR_EQUAL,
                            placeholder: 'greater than or equal'
                        },
                        {
                            condition: uiGridConstants.filter.LESS_THAN_OR_EQUAL,
                            placeholder: 'less than or equal'
                        }
                    ]
                },
                {
                    field: ' ',
                  //.................................
                }
            ],
            onRegisterApi: function (gridApi) {
                $scope.grid1Api = gridApi;
            },
            enableRowSelection: true,
            enableGridMenu: true,
            enableSelectAll: true,
            exporterMenuPdf: true,
            exporterMenuExcel: false,
            exporterCsvFilename: 'Orders.csv',
            exporterPdfDefaultStyle: {
                fontSize: 9
            },
            exporterPdfTableStyle: {
                margin: [4,30,30,30]
            },
            exporterPdfTableHeaderStyle: {
                fontSize: 10,
                bold: true,
                italics: true,
                color: 'red'
            },
            exporterPdfHeader: {
                text: "Orders",
                style: 'headerStyle'
            },
            exporterPdfFooter: function (currentPage, pageCount) {
                return {
                    text: currentPage.toString() + ' of ' + pageCount.toString(),
                    style: 'footerStyle'
                };
            },
            exporterPdfCustomFormatter: function (docDefinition) {
                docDefinition.styles.headerStyle = {
                    fontSize: 22,
                    bold: true
                };
                docDefinition.styles.footerStyle = {
                    fontSize: 10,
                    bold: true
                };
                return docDefinition;
            },
            exporterPdfOrientation: 'portrait',
            exporterPdfPageSize: 'LETTER',
            exporterPdfMaxGridWidth: 550,
            exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location"))
        };
        $scope.orders = [{"EnID":"CfDJ8DxuHlHxIyNIhPR82Tv-RtJAL99wRMMRi8Pw5CY1jLx3D9Sf2Gk2yV8oktqzt8S45ryjemJVoo2h6f2M9HnmjDg1AcFl1NRMRs98tuMmfQwJvECBaMja3YTGaWiDaK63WA","ID":50,"CustomerName":"Mahesh","Total":1333.0200,"OrderDate":"2021-03-27T16:56:51.5333333","Discount":0.0000,"Due":0,"OrderNo":"ORD0000000050","IsDeleted":false,"OrderStatus":2,"OrderStatusText":"SalesOrder"},{"EnID":"CfDJ8DxuHlHxIyNIhPR82Tv-RtIbua2DTIrFBAc2PXZy5ggdno2EejZP9G7NGRK5qqVs7W4jsPLLSQLHpwQdZvqyZEOqWxCq-YIpCiqZDOFoFWCy27P3UCOLB84xxG70uukjgg","ID":51,"CustomerName":"Mahesh","Total":200.0000,"OrderDate":"2021-03-27T17:34:34.2333333","Discount":0.0000,"Due":0,"OrderNo":"ORD0000000051","IsDeleted":false,"OrderStatus":2,"OrderStatusText":"SalesOrder"},{"EnID":"CfDJ8DxuHlHxIyNIhPR82Tv-RtLLV57wItiRyN9yZ_oBF8ke-Sh6q7qpJOWOZHL1nu_RCpY656-FiuWpVN8ET1aEBnsd3FZhealb56irckvjWwOHgnBrErVVZgZJ-IRVTXMvug","ID":52,"CustomerName":"Mahesh","Total":460.0000,"OrderDate":"2021-03-27T22:11:21.88","Discount":0.0000,"Due":0,"OrderNo":"ORD0000000052","IsDeleted":false,"OrderStatus":2,"OrderStatusText":"SalesOrder"}];
        $scope.gridOptions.data = $scope.orders;
    });

</script>

<style type="text/css">
    .myGrid {
        width: 100%;
        height: 550px;
    }
</style>

<div ng-app="uigridApp">
    <div ng-controller="uigridCtrl">
        <div ui-grid="gridOptions" ui-grid-pagination ui-grid-auto-resize ui-grid-selection ui-grid-exporter class="myGrid"></div>
    </div>
</div>

字符串
请给予一个解决这个问题的办法。

ia2d9nvy

ia2d9nvy1#

添加一个函数,以使用正确的符号和货币代码来设置货币值的格式。您可以在列定义中使用cellTemplate属性来应用此格式。

function formatCurrency(row, grid, options) {
    var currencySymbol = '$'; 
    var currencyCode = 'USD';
    return currencySymbol + row.entity[options.colDef.name] + ' ' + currencyCode;
}

字符串
像这样更新列定义:

$scope.gridOptions.columnDefs = [
    {
        field: 'CustomerName',
        // ...
    },
    {
        field: 'OrderNo',
        // ...
    },
    {
        field: 'OrderStatusText',
        // ...
    },
    {
        field: 'OrderDate',
        // ...
    },
    {
        field: 'Total',
        width: '10%',
        cellTemplate: '<div>{{COL_FIELD | currency:"$"}}</div>',
        cellClass: 'gridcell-text-right',
        filters: [
            {
                condition: uiGridConstants.filter.GREATER_THAN_OR_EQUAL,
                placeholder: 'greater than or equal'
            },
            {
                condition: uiGridConstants.filter.LESS_THAN_OR_EQUAL,
                placeholder: 'less than or equal'
            }
        ]
    },

bxpogfeg

bxpogfeg2#

在为cellFilter属性添加以下自定义过滤器函数后,问题得到修复。

filter('currencyFilter', function () {
        let USDoller = new Intl.NumberFormat('en-US', {
            style: 'currency',
            currency: 'USD'
        });
        return function (value, scope) {
            return USDoller.format(value);
        };
    });

字符串

相关问题