angularjs 导出excel php,AngularJS 导出Excel指令
Excel導出思路
項目中使用到了導出Excel功能，潘老師已經在博客中將表格導出為csv的技術難點實現，剩下的，只是根據實際的業務需求對該指令進行完善。
大體遇到了以下幾個問題：
功能按鈕不導出
因為原指令默認導出表格所有的內容，第一次直接導出時，發現直接將查看、編輯這幾個按鈕的HTML代碼都導出去了，我們要的應該是人員信息和人員資質信息。
指令添加參數：有效數據列數。
如圖，這里的有效數據列就是市、區縣等等一直到有效期至，一共15列，作為參數傳給導出指令。
self.exportCols = scope.exportCols;
for (let i = 0; i < table.rows.length; i ++) {
// 獲取每行的數據
var rowData = table.rows[i].cells;
// 如果該列為正常列，循環內容
for (let j = 0; j < self.exportCols; j ++) {
// 如果該列不存在，則賦值為空內容
var data = rowData[j] === undefined ? '' : rowData[j].innerHTML;
// 拼接內容，用逗號分隔
csvString = csvString + data + ",";
}
// 刪除最后多余的逗號
csvString = csvString.substring(0, csvString.length - 1);
// 每行末尾添加\n進行換行
csvString = csvString + "\n";
}
原來內層循環的是所有數據列，現在改成傳入的有效數據列數。
跨行表格
以這個圖為例，第一行是有15列的，但是第二行的數據只有4列，因為其余的列是第一行設置rowspan顯示的，實際上第二行的tr中只有人員資質4個td。
這就導致導出的時候第二行只有四個數據，并且是從左對齊的，所以我們需要在跨行的列添加空數據。
加一個條件判斷，傳入出現被跨行的列時剩余列的長度，用于區分是正常列還是被跨行的列。
if (self.isNormalItem(rowData)) {
// 如果該列為正常列，循環內容
for (let j = 0; j < self.exportCols; j++) {
// 如果該列不存在，則賦值為空內容
var data = rowData[j] === undefined ? '' : rowData[j].innerHTML;
// 拼接內容，用逗號分隔
csvString = csvString + data + ",";
}
} else {
// 根據有效數據中的跨行列拼接空數據
for (let j = 0; j < self.multipleRowCols; j ++) {
csvString = csvString + ",";
}
// 根據有效數據減去跨行列，獲得非跨行列，并拼接數據
for (let index = 0; index < self.exportCols - self.multipleRowCols; index ++) {
csvString = csvString + rowData[index].innerHTML + ",";
}
}
資格證出現空列
因為這里需要為添加資格證按鈕添加一個空列，導出的時候也會出現空列，效果并不好。
所以需要進行判斷，當出現被跨行的列時，需要判斷它的上一行的最后四項內容是否為空，如果為空，就應該把這個列的內容放到上一行。
if (self.isNormalItem(rowData)) {
// 如果該列為正常列，循環內容
...
} else if (self.isFirstItem(csvString)) {
// 如果當前跨行資質是當前人員的第一個資質，則將該資質添加到上一行
// 因為能添加人員資質的界面第一行的人員資質是空的，所以需要將該資
// 質添加到上一行
csvString = self.addDataToPreString(rowData, csvString);
} else {
// 根據有效數據中的跨行列拼接空數據
...
}
再加一個else，如果當前被跨行的列是當前人員的第一個人員資質的話，就把這一行的人員資質數據添加到上一行人員資質的空白處。
下面是方法的具體實現：
// 判斷當前表格中資質是否是第一項資質
self.isFirstItem = function(string) {
// 分隔字符串
var csvArray = string.split(',');
// 循環已有字符數組的倒數四個元素，判斷是否有效
for (var i = csvArray.length - 1; i >= csvArray.length - 4; i--) {
if (self.isValid(csvArray[i])) {
return false;
}
}
return true;
};
// 判斷當前字符是否有效
// 空字符和\n視為無效
self.isValid = function(char) {
if (char === '' || char === '\n') {
return false;
} else {
return true;
}
};
// 添加數據到字符串的上一行
self.addDataToPreString = function(data, string) {
// 字符串分隔為數據
var csvArray = string.split(',');
// 循環，將有效的數據添加到上一行
for (let i = 0; i < self.validNoMultipleRowCols; i++) {
csvArray[csvArray.length - self.validNoMultipleRowCols + i] = data[i].innerHTML;
}
// 數組轉換為字符串
return csvArray.join(',');
};
最終實現導出的csv效果：
總結
以上是生活随笔為你收集整理的angularjs 导出excel php,AngularJS 导出Excel指令的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python中xlwt的局限,Pytho
- 下一篇： php 连续点击事件,javascrip