Excel中沒有正確生成angularjs

Question

我使用angularjs和生成excel表使用blob與filesaver.js的幫助我得到我的正常，但Excel無法正確打開Micrsoft Excel中它的工作，但我沒有得到細胞它顯示黑白頁，但內容是存在的。幫助如何解決

在這裏，我附上了我的小提琴：https://jsfiddle.net/x30v0bym/3/

Answer 1

您可以使用下面的指令，

app 
    .directive('excelExport', 
    function() { 
     return { 
     restrict: 'A', 
     scope: { 
      fileName: "@", 
      data: "&exportData" 
     }, 
     replace: true, 
     template: '<button class="btn btn-primary btn-ef btn-ef-3 btn-ef-3c mb-10" ng-click="download()">Export to Excel <i class="fa fa-download"></i></button>', 
     link: function(scope, element) { 

      scope.download = function() { 

      function datenum(v, date1904) { 
       if (date1904) v += 1462; 
       var epoch = Date.parse(v); 
       return (epoch - new Date(Date.UTC(1899, 11, 30)))/(24 * 60 * 60 * 1000); 
      }; 

      function getSheet(data, opts) { 
       var ws = {}; 
       var range = { 
       s: { 
        c: 10000000, 
        r: 10000000 
       }, 
       e: { 
        c: 0, 
        r: 0 
       } 
       }; 
       for (var R = 0; R != data.length; ++R) { 
       for (var C = 0; C != data[R].length; ++C) { 
        if (range.s.r > R) range.s.r = R; 
        if (range.s.c > C) range.s.c = C; 
        if (range.e.r < R) range.e.r = R; 
        if (range.e.c < C) range.e.c = C; 
        var cell = { 
        v: data[R][C] 
        }; 
        if (cell.v == null) continue; 
        var cell_ref = XLSX.utils.encode_cell({ 
        c: C, 
        r: R 
        }); 

        if (typeof cell.v === 'number') cell.t = 'n'; 
        else if (typeof cell.v === 'boolean') cell.t = 'b'; 
        else if (cell.v instanceof Date) { 
        cell.t = 'n'; 
        cell.z = XLSX.SSF._table[14]; 
        cell.v = datenum(cell.v); 
        } else cell.t = 's'; 

        ws[cell_ref] = cell; 
       } 
       } 
       if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range); 
       return ws; 
      }; 

      function Workbook() { 
       if (!(this instanceof Workbook)) return new Workbook(); 
       this.SheetNames = []; 
       this.Sheets = {}; 
      } 

      var wb = new Workbook(), 
       ws = getSheet(scope.data()); 
      /* add worksheet to workbook */ 
      wb.SheetNames.push(scope.fileName); 
      wb.Sheets[scope.fileName] = ws; 
      var wbout = XLSX.write(wb, { 
       bookType: 'xlsx', 
       bookSST: true, 
       type: 'binary' 
      }); 

      function s2ab(s) { 
       var buf = new ArrayBuffer(s.length); 
       var view = new Uint8Array(buf); 
       for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF; 
       return buf; 
      } 

      saveAs(new Blob([s2ab(wbout)], { 
       type: "application/octet-stream" 
      }), scope.fileName + '.xlsx'); 

      }; 

     } 
     }; 
    } 
); 

DEMO

Answer 2

你的小提琴包含除了一件重要的事情之外所需的一切。你不會生成excel可以理解的內容。

你的問題是在這裏：

var blob = new Blob([document.getElementById('exportable').innerHTML], { 
    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8" 
}); 

更具體地說，在這裏：

[document.getElementById('exportable').innerHTML] 

這將返回HTML，這不是Excel文件格式。沒有將HTML轉換爲Excel的自動魔法。

這通常在服務器端完成，而不是AngularJS。但是如果你被迫，你需要另一個庫來處理你的數據和Excel之間的轉換。受歡迎的圖書館之一是ExcelJS。

簡單的解決方案 - 生成CSV

我建議跳過Excel和CSV生成，這是產生儘可能簡單的格式 - 用Excel的理解。你只需要修改你的導出功能：

$scope.exportData = function() { 
    var blob = new Blob([convertToCsv($scope.items)], { 
     type: "text/csv" 
    }); 
    saveAs(blob, "Report.csv"); 

    function convertToCsv(items) { 
     var headers = "Name; Email; DoB \n"; 

     return headers + items.map(function(item) { 
      return item.name + ";" + item.email + ";" + item.dob; 
     }).join("\n"); 
    } 
}; 

功能convertToCsv整理物品放入格式：

Name; Email; DoB 
John Smith;j.smith@example.com;1985-10-10 
Jane Smith;jane.smith@example.com;1988-12-22 
Jan Smith;jan.smith@example.com;2010-01-02 
Jake Smith;jake.smith@exmaple.com;2009-03-21 
Josh Smith;josh@example.com;2011-12-12 
Jessie Smith;jess@example.com;2004-10-12 

你的小提琴更新：DEMO

下載的文件Reports.csv能在Excel中打開並編輯。

注

• 您將無法使用特定功能Excel作爲設置列寬，顏色等
• 我與CSV解決方案是不太你問什麼，但我相信它仍然是不夠好
• 相關問題：how to generate Excel through Javascript其中指出其他的解決方案

function myCtrl($scope) { 
 
    $scope.exportData = function() { 
 
    var blob = new Blob([convertToCsv($scope.items)], { 
 
     type: "text/csv" 
 
    }); 
 
    saveAs(blob, "Report.csv"); 
 

 
    function convertToCsv(items) { 
 
     var headers = "Name; Email; DoB \n"; 
 

 
     return headers + items.map(function(item) { 
 
     return item.name + ";" + item.email + ";" + item.dob; 
 
     }).join("\n"); 
 
    } 
 
    }; 
 

 
    $scope.items = [{ 
 
    name: "John Smith", 
 
    email: "j.smith@example.com", 
 
    dob: "1985-10-10" 
 
    }, { 
 
    name: "Jane Smith", 
 
    email: "jane.smith@example.com", 
 
    dob: "1988-12-22" 
 
    }, { 
 
    name: "Jan Smith", 
 
    email: "jan.smith@example.com", 
 
    dob: "2010-01-02" 
 
    }, { 
 
    name: "Jake Smith", 
 
    email: "jake.smith@exmaple.com", 
 
    dob: "2009-03-21" 
 
    }, { 
 
    name: "Josh Smith", 
 
    email: "josh@example.com", 
 
    dob: "2011-12-12" 
 
    }, { 
 
    name: "Jessie Smith", 
 
    email: "jess@example.com", 
 
    dob: "2004-10-12" 
 
    }] 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
<script src="https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js" type="text/javascript"></script> 
 
<body ng-app> 
 
    <div ng-controller="myCtrl"> 
 
    <button ng-click="exportData()">Export</button> 
 
    <br /> 
 
    <div id="exportable"> 
 
     <table width="100%"> 
 
     <thead> 
 
      <tr> 
 
      <th>Name</th> 
 
      <th>Email</th> 
 
      <th>DoB</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr ng-repeat="item in items"> 
 
      <td>{{item.name}}</td> 
 
      <td>{{item.email}}</td> 
 
      <td>{{item.dob | date:'MM/dd/yy'}}</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    </div> 
 
</body>