AngularJS 내보내기 Excel 지침

이 글은 주로 AngularJS로 Excel을 내보내는 방법을 소개합니다. 이제 특정 참고 가치가 있습니다. 필요한 친구들이 참고할 수 있습니다.

Excel아이디어 내보내기

Excel导出思路

参考文章 - angularjs使用指令实现table导出csv

项目中使用到了导出Excel功能，潘老师已经在博客中将表格导出为csv的技术难点实现，剩下的，只是根据实际的业务需求对该指令进行完善。

大体遇到了以下几个问题：

功能按钮不导出

因为原指令默认导出表格所有的内容，第一次直接导出时，发现直接将查看、编辑这几个按钮的HTML代码都导出去了，我们要的应该是人员信息和人员资质信息。

指令添加参数：有效数据列数。

如图，这里的有效数据列就是市、区县等等一直到有效期至，一共15列，作为参数传给导出指令。

self.exportCols = scope.exportCols;

for (let i = 0; i <p>原来内层循环的是所有数据列，现在改成传入的有效数据列数。</p><h2 id="跨行表格">跨行表格</h2><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/680/867/883/1531123509788663.png" class="lazy" title="1531123509788663.png" alt="AngularJS 내보내기 Excel 지침"></p><p>以这个图为例，第一行是有<code>15</code>列的，但是第二行的数据只有<code>4</code>列，因为其余的列是第一行设置<code>rowspan</code>显示的，实际上第二行的<code>tr</code>中只有人员资质<code>4</code>个<code>td</code>。</p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/843/685/233/1531123518744940.png" class="lazy" title="1531123518744940.png" alt="AngularJS 내보내기 Excel 지침"></p><p>这就导致导出的时候第二行只有四个数据，并且是从左对齐的，所以我们需要在跨行的列添加空数据。</p><p>加一个条件判断，传入出现被跨行的列时剩余列的长度，用于区分是正常列还是被跨行的列。</p><pre class="brush:php;toolbar:false">if (self.isNormalItem(rowData)) {
    // 如果该列为正常列，循环内容
    for (let j = 0; j <h2 id="资格证出现空列">资格证出现空列</h2><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/802/452/143/1531123537590884.png" class="lazy" title="1531123537590884.png" alt="AngularJS 내보내기 Excel 지침"></p><p>因为这里需要为添加资格证按钮添加一个空列，导出的时候也会出现空列，效果并不好。</p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/767/939/808/1531123544352657.png" class="lazy" title="1531123544352657.png" alt="AngularJS 내보내기 Excel 지침"></p><p>所以需要进行判断，当出现被跨行的列时，需要判断它的上一行的最后四项内容是否为空，如果为空，就应该把这个列的内容放到上一行。</p><pre class="brush:php;toolbar:false">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 <p>最终实现导出的<code>csv</code> 참고 기사 - Angularjs는 지침을 사용하여 테이블을 csv로 내보내기를 구현합니다</p><p> <code>Excel</code> 내보내기 기능이 프로젝트에 사용됩니다. Pan 선생님은 이미 테이블을 <code>csv로 내보내는 기술적인 어려움을 구현했습니다. code>를 참조하세요. 나머지 네, 이 지시문은 실제 비즈니스 요구에 따라 개선되었습니다. <img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/976/352/627/1531123556704357.png" class="lazy" title="1531123556704357.png" alt="AngularJS 내보내기 Excel 지침"></code></p>일반적으로 다음과 같은 문제가 발생했습니다. <p></p><h2 id="기능-버튼이-내보내지지-않습니다">기능 버튼이 내보내지지 않습니다</h2><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/680/867/883/1531123509788663.png" class="lazy" title="1531123500405481.png" alt="AngularJS 내보내기 Excel 지침"><p></p>원래 명령은 기본적으로 테이블의 내용을 모두 내보내기 때문에 처음 직접 내보낼 때는 이를 직접 보고 편집할 수 있습니다. 여러 버튼의 <code>HTML</code> 코드가 내보내졌습니다. 우리가 원하는 것은 인사 정보와 인사 자격 정보여야 합니다. <p class="comments-box-content"><a title="AngularJS 文档阅读的指令scope" href="http://www.php.cn/js-tutorial-406295.html" target="_blank">이 명령은 유효한 데이터 열 수라는 매개변수를 추가합니다. </a><br>그림과 같이 여기서 유효한 데이터 열은 유효기간이 만료될 때까지 시, 구, 군 등이며, 내보내기 명령으로 전달되는 총 <code>15</code> 열이 있습니다. 매개변수로. </p>rrreee<p class="mt20 ad-detail-mm hidden-xs">내부 루프는 모두 데이터 열인 것으로 밝혀졌는데, 이제는 전달된 유효한 데이터 열의 개수로 변경되었습니다. <a title="AngularJS 表格导出添加额外信息" href="http://www.php.cn/js-tutorial-406294.html" target="_blank"><h2 id="교차-행-테이블">교차 행 테이블</h2></a><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/680/867/883/1531123509788663.png" class="lazy" title="1531123509788663.png" alt="AngularJS 내보내기 Excel 지침"><br></p>이 그림을 예로 들어 보겠습니다. 첫 번째 행에는 <code>15</code> 열이 있지만 두 번째 행에는 <code>4</code>만 있습니다. > 열은 첫 번째 행에 <code>rowspan</code>을 설정하여 나머지 열을 표시하기 때문입니다. 실제로 <code>tr</code>에는 인사 자격이 <code>4</code>개만 있습니다. 두 번째 행의 <code>td</code>입니다. 🎜🎜<img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/843/685/233/1531123518744940.png" class="lazy" title="1531123518744940.png" alt="AngularJS 내보내기 Excel 지침 ">🎜🎜이렇게 하면 내보낼 때 두 번째 행에 데이터가 4개만 있고 왼쪽부터 정렬되므로 행 전체의 열에 빈 데이터를 추가해야 합니다. 🎜🎜조건부 판단을 추가하고, 스트래들링 시 나머지 컬럼의 길이를 전달하는데, 이는 일반 컬럼인지 스트래들링된 컬럼인지 구분하는 데 사용됩니다. 🎜rrreee<h2 id="자격증-열이-비어-있습니다">자격증 열이 비어 있습니다</h2>🎜<img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/802/452/143/1531123537590884.png" class="lazy" title="1531123537590884 .png" alt="AngularJS 내보내기 Excel 지침">🎜🎜자격증 추가 버튼에 빈 컬럼을 추가해야 하기 때문에 내보내기 시에도 빈 컬럼이 나타나서 효과가 좋지 않습니다. 🎜🎜<img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/767/939/808/1531123544352657.png" class="lazy" title="1531123544352657.png" alt="AngularJS 내보내기 Excel 지침 ">🎜🎜그래서 판단이 필요합니다. 스팬된 열이 나타나면 이전 행의 마지막 4개 내용이 비어 있는지 판단해야 합니다. 비어 있으면 이 열의 내용을 넣어야 합니다. 이전 행으로 이동합니다. 🎜rrreee🎜 <code>else</code>를 하나 더 추가하세요. 현재 넘고 있는 열이 현재 사람의 첫 번째 자격이라면, 이전 자격 행의 공백에 이 행의 자격 데이터를 추가하세요. 🎜🎜다음은 메소드의 구체적인 구현입니다. 🎜rrreee🎜드디어 내보낸 <code>csv</code> 효과를 달성했습니다. 🎜🎜🎜🎜🎜위는 이 기사의 전체 내용입니다. 도움이 되기를 바랍니다. 모두의 학습을 위해, 더 많은 관련 콘텐츠를 보려면 PHP 중국어 웹사이트에 주목하세요! 🎜🎜관련 권장 사항: 🎜🎜🎜AngularJS 문서 읽기 명령 범위🎜🎜🎜🎜🎜추가 정보를 추가하기 위한 AngularJS 테이블 내보내기🎜🎜🎜

위 내용은 AngularJS 내보내기 Excel 지침의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!