AngularJS 表格導出添加額外信息

原指令

原導出Excel指令，AngularJS 導出Excel指令。

這是用戶的需求，單位申請檢定器具，能夠申請一次檢定多個器具，技術機構的人員拿到的打印表格去聯繫部門檢定，因此表格中應該是有器具的表格信息，同時還有申請單位、聯繫電話等信息。

剛閱讀完官方文檔，在不影響原指令的使用狀況下，咱們能夠去再設置一個可選的extraData參數，若是傳入該參數，就把這個放到表格的頭部，未傳入，即兼容原指令使用，按原方法輸出表格。

指令完善

指令加一個參數extraData，綁定模式加?，表示該屬性可選

scope: {
    extraData: '=?',            // = 雙向綁定，？表示該屬性可選
    tableId: '@',               // 表格id
    exportCols: '@',            // 表格導出的列數，爲了解決編輯刪除按鈕的問題，若是所有導出會將編輯刪除的代碼一併導出
    multipleRowCols: '@',       // 表格中有效數據跨行的列數，添加空，用於顯示跨行效果
    noMultipleRowCols: '@',     // 整個表格中不跨行的列數，用戶判斷該行爲正常行仍是跨行行
    csvName: '@'                // 導出表格名稱
}

數據結構設計

由於須要在一項中傳入要額外添加的全部信息，因此這裏最好的數據結構應該是Map。

// 若是傳入了extraData的話，表示有額外的數據，添加到表格頭
if (scope.hasOwnProperty('extraData')) {
    // foreach傳入的map
    scope.extraData.forEach(function(value, key) {
        // 對於null/undefined的數據採用空字符替換
        let tempValue = value ? value : '';
        // 拼接到數據中
        csvString = csvString + key + "," + tempValue + "\n";
    });
}

對Map進行遍歷，拼接鍵值對，每循環一次加一個換行。

構建Map

// 生成額外的數據信息，用於Excel導出使用
self.generateMapForExcelExtraData = function() {
    var map = new Map();
    map.set('申請日期', $filter('date')($scope.work.apply.applyTime));
    map.set('申請單位', $scope.work.apply.department.name);
    map.set('申請人', $scope.work.apply.createUser.name);
    map.set('聯繫電話', $scope.work.apply.createUser.mobile);
    map.set('檢定場所', $scope.work.apply.checkPlace);
    map.set('申請備註', $scope.work.apply.remarks);
    map.set('申請ID', $scope.work.apply.id);
    map.set('受理部門', $scope.work.apply.auditingDepartment.name);
    map.set('受理人', $scope.work.apply.auditingUser.name);
    map.set('受理人電話', $scope.work.apply.auditingUser.mobile);
    map.set('計劃檢定日期', $scope.work.apply.plannedCheckDate);
    map.set('受理備註', $scope.work.apply.replyRemarks);
    $scope.extraData = map;
};

實現效果：