具有导出选项(如Datatables)的等效单个Html文件

从外观上看,您可以导出CSV和PDF。我没有看到Excel导出工作的任何证据。我不确定是否立即打印功能,但是,导出PDF并打印将是一个选项。如果这会破坏交易,我可以晚些时候再看。

导出函数的代码来自 UI-Grid.info: 312 Exporting Data With Custom UI 。如果需要,可以将其转换为按钮,但这提供了外部导出功能。右上角的小菜单也有这些导出选项,所以我把它留给你们做实验。背景 $scope.gridOptions.enableGridMenu 将关闭该选项。

JS公司

$scope.gridOptions = {
    enableGridMenu: true,
    data: 'data',
    paginationPageSizes: [10],
    paginationPageSize: 10,

    exporterLinkLabel: 'get your csv here',
    exporterPdfDefaultStyle: {fontSize: 9},
    exporterPdfTableStyle: {margin: [10, 10, 10, 10]},
    exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'red'},
    exporterPdfOrientation: 'portrait',
    exporterPdfPageSize: 'LETTER',
    exporterPdfMaxGridWidth: 500,

    onRegisterApi: function(gridApi){
      $scope.gridApi = gridApi;
    },

  };

  // Verbatim: http://ui-grid.info/docs/#/tutorial/312_exporting_data_complex
  $scope.export = function(){
    if ($scope.export_format == 'csv') {
      var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
      $scope.gridApi.exporter.csvExport( $scope.export_row_type, $scope.export_column_type, myElement );
    } else if ($scope.export_format == 'pdf') {
      $scope.gridApi.exporter.pdfExport( $scope.export_row_type, $scope.export_column_type );
    }
  };

HTML

<!-- Verbatim: http://ui-grid.info/docs/#/tutorial/312_exporting_data_complex -->
<label>Which columns should we export?</label>
  <select ng-model="export_column_type"</select>
    <option value='all'>All</option>
    <option value='visible'>Visible</option>
  </select>
  <label>Which rows should we export?</label>
  <select ng-model="export_row_type"</select>
    <option value='all'>All</option>
    <option value='visible'>Visible</option>
    <option value='selected'>Selected</option>
  </select>
  <label>What format would you like?</label>
  <select ng-model="export_format"</select>
    <option value='csv'>CSV</option>
    <option value='pdf'>PDF</option>
  </select>
  <button ng-click="export()">Export</button>
  <div class="custom-csv-link-location">
    <label>Your CSV will show below:</label>
    <span class="ui-grid-exporter-csv-link">&nbsp</span>
  </div>

  <div ui-grid="gridOptions" class="grid" style="width:100%"
       ui-grid-selection ui-grid-exporter ui-grid-pagination></div>
  </div>

Example Plunk