Question

我正在使用角度ui网格。我正在尝试将网格导出为pdf格式。我正在使用角度翻译，我必须翻译成的语言之一是日语。但是当我尝试将日语中的网格列导出为pdf格式时，标题会消失。请告诉我这是什么问题。

以下是plunker的链接 - http://plnkr.co/edit/6foYrcyv1Q2oE4VVYDss?p=preview

正如您所见，当我们尝试将网格导出为pdf格式时，性别，公司和名称标题消失。

app.js

var app = angular.module("app", ['ngTouch', 'ui.grid', 'pascalprecht.translate','ui.grid.exporter']);

app.controller("MainController", mainController);

function mainController($scope, $http, $translate, $window){
    $scope.langs = ['en', 'de', 'ja'];
    $scope.lang = 'ja';

    $scope.changeLanguage = changeLanguage;

    $scope.gridOptions = {
      columnDefs: [
        { displayName: 'NAME', field: 'name', headerCellFilter: "translate" },
        { displayName: 'GENDER', field: 'gender', headerCellFilter: 'translate' },
        { displayName: 'COMPANY', field: 'company', headerCellFilter: 'translate', enableFiltering: false  }
      ],
      enableGridMenu: true,
      exporterPdfDefaultStyle: {fontSize: 9},
          exporterPdfTableStyle: {margin: [10, 10, 20, 40]},
          exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'red'},
          exporterPdfHeader: { text: "Data", style: 'pdfStyle' },

      gridMenuTitleFilter: getTranslation,
      exporterHeaderFilter  : $translate.instant
    };

    $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
    });

    function getTranslation(title){
        return $translate.instant(title);
    }

    function changeLanguage() {
      $translate.use($scope.lang);
    }
}

app.config(function ($translateProvider){
  $translateProvider.translations('en', {
    'GENDER': 'Gender',
    'NAME': 'Name',
    'COMPANY': 'Company'
  });
  $translateProvider.translations('de', {
    'GENDER': 'Geschlecht',
    'NAME': 'Name',
    'COMPANY': 'Unternehmen'
  });
   $translateProvider.translations('de', {
    'GENDER': '性別',
    'NAME': '名',
    'COMPANY': '会社'
  });
  $translateProvider.preferredLanguage('de');
});

的index.html

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
    <script src="https://rawgithub.com/PascalPrecht/bower-angular-translate/master/angular-translate.min.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

    <div ng-controller="MainController">
      <select ng-change="changeLanguage()" ng-options="l for l in langs" ng-model="lang"></select>
      <br>
      <div class="grid" ui-grid="gridOptions" ui-grid-exporter></div>

      <script src="app.js"></script>
    </div>
  </body>
</html>

的main.css

.grid {
  width: 500px;
  height: 250px;
}

Angular Ui grid - 无法将日文标题导出为pdf格式

0 个答案: