AngularJS export Excel instructions

This article mainly introduces the instructions for exporting Excel from AngularJS, which has certain reference value. Now I share it with everyone. Friends in need can refer to it

ExcelExport ideas

Reference article - angularjs uses instructions to implement table export to csv

The export Excel function is used in the project. Teacher Pan has exported the table to csv## in his blog #The technical difficulties are implemented, and the rest is just to improve the instruction according to actual business needs.

Generally encountered the following problems:

Function buttons do not export

Because the original command exports all the contents of the table by default. When exporting directly, we found that the

HTML codes of the view and edit buttons were directly exported. What we want is personnel information and personnel qualification information.

The command adds parameters: the number of valid data columns.

As shown in the figure, the valid data columns here are cities, districts, counties, etc. until the validity period expires. There are a total of

15 columns, which are passed to the export command as parameters.

self.exportCols = scope.exportCols;

for (let i = 0; i It turns out that the inner loop is all data columns, but now it is changed to the number of valid data columns passed in. <p></p>Cross-row table<h2></h2><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/680/867/883/1531123509788663.png?x-oss-process=image/resize,p_40" class="lazy" title="1531123509788663.png" alt="AngularJS export Excel instructions"></p>Taking this picture as an example, the first row has <p>15<code> columns, but the data in the second row There is only the </code>4<code> column, because the rest of the columns are displayed by setting </code>rowspan<code> in the first row. In fact, there are only personnel qualifications </code>4 in the <code>tr</code> in the second row. <code>一</code>td<code>. </code></p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/843/685/233/1531123518744940.png?x-oss-process=image/resize,p_40" class="lazy" title="1531123518744940.png" alt="AngularJS export Excel instructions"></p>#This results in the second row having only four data when exporting, and it is aligned from the left, so we need to add empty data to the columns across rows. <p></p>Add a conditional judgment and pass in the length of the remaining columns when a column is straddled, which is used to distinguish whether it is a normal column or a column that is straddled. <p></p><pre class="brush:php;toolbar:false">if (self.isNormalItem(rowData)) {
    // 如果该列为正常列，循环内容
    for (let j = 0; j The qualification certificate appears in an empty column<h2></h2><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/802/452/143/1531123537590884.png?x-oss-process=image/resize,p_40" class="lazy" title="1531123537590884.png" alt="AngularJS export Excel instructions"></p>Because it is necessary to add an empty column for the add qualification certificate button, and an empty column will also appear when exporting, the effect not good. <p></p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/767/939/808/1531123544352657.png?x-oss-process=image/resize,p_40" class="lazy" title="1531123544352657.png" alt="AngularJS export Excel instructions"></p>So it needs to be judged. When a column that is crossed appears, it needs to be judged whether the last four contents of its previous row are empty. If it is empty, it should be The contents of this column are moved to the previous row. <p></p><pre class="brush:php;toolbar:false">if (self.isNormalItem(rowData)) {
    // 如果该列为正常列，循环内容
    ...
} else if (self.isFirstItem(csvString)) {
    // 如果当前跨行资质是当前人员的第一个资质，则将该资质添加到上一行
    // 因为能添加人员资质的界面第一行的人员资质是空的，所以需要将该资
    // 质添加到上一行
    csvString = self.addDataToPreString(rowData, csvString);
} else {
    // 根据有效数据中的跨行列拼接空数据
    ...
}

Add another

else. If the column currently being crossed is the first qualification of the current person, add the qualification data of this row to the qualification data of the previous row. Blank space.

The following is the specific implementation of the method:

// 判断当前表格中资质是否是第一项资质
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 The final exported <p>csv<code> effect: </code></p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/976/352/627/1531123556704357.png?x-oss-process=image/resize,p_40" class="lazy" title="1531123556704357.png" alt="AngularJS export Excel instructions"></p>The above is The entire content of this article is hoped to be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website! <p></p>Related recommendations:<p></p><p class="comments-box-content">AngularJS document reading directive scope<a title="AngularJS 文档阅读的指令scope" href="http://www.php.cn/js-tutorial-406295.html" target="_blank"></a><br></p><p class="mt20 ad-detail-mm hidden-xs">AngularJS table export to add additional information<a title="AngularJS 表格导出添加额外信息" href="http://www.php.cn/js-tutorial-406294.html" target="_blank"></a><br></p>

The above is the detailed content of AngularJS export Excel instructions. For more information, please follow other related articles on the PHP Chinese website!