AngularJS Excel エクスポート手順

この記事では、主に AngularJS を使用して Excel をエクスポートする手順を紹介します。必要な友人はそれを参照できるようにします。

ExcelExport アイデア

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/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 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/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 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/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 Excel エクスポート手順"></p><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 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>このプロジェクトでは、export <code>Excel</code> 関数が使用されており、Pan 先生はテーブルを <code>csv</code> にエクスポートするという技術的な困難をすでに実装しています。 code> の残りの部分は、はい、このディレクティブは実際のビジネス ニーズに基づいてのみ改善されます。 <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 Excel エクスポート手順"></p>一般的に次の問題が発生しました: <p></p><h2 id="機能ボタンがエクスポートされない">機能ボタンがエクスポートされない</h2><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="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/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 Excel エクスポート手順"><br></p>この図を例として見てみましょう。最初の行には <code>15</code> 列がありますが、2 行目には <code>4</code> しかありません。 > 列。最初の行に <code>rowspan</code> を設定することで残りの列が表示されるためです。実際、<code>tr</code> には <code>4</code> 個の人材資格しかありません。 2 行目の <code>td</code>。 🎜🎜<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 Excel エクスポート手順 ">🎜🎜これにより、エクスポート時に 2 行目のデータは 4 つだけになり、左から揃えられるため、行全体の列に空のデータを追加する必要があります。 🎜🎜条件判定を追加し、柱をまたぐ場合に残った柱の長さを渡し、通常の柱かまたがった柱かを区別します。 🎜rrreee<h2 id="資格証明書の列が空になります">資格証明書の列が空になります</h2>🎜<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 Excel エクスポート手順">🎜🎜資格証明書の追加ボタンに空の列を追加する必要があるため、エクスポート時にも空の列が表示され、効果が良くありません。 🎜🎜<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 Excel エクスポート手順 ">🎜🎜したがって、判断する必要があります。スパンされた列が表示されたとき、その前の行の最後の 4 つの内容が空かどうかを判断する必要があります。空の場合は、この列の内容を配置する必要があります前の行に移動します。 🎜rrreee🎜 別の <code>else</code> を追加します。現在交差している列が現在の人の最初の資格である場合、この行の資格データを資格の前の行の空白スペースに追加します。 🎜🎜以下はメソッドの具体的な実装です: 🎜rrreee🎜ついにエクスポートされた <code>csv</code> 効果を実現しました: 🎜🎜🎜🎜🎜 上記はこの記事の全内容です。お役に立てば幸いです。皆様の学習に、より関連したコンテンツについては、PHP 中国語 Web サイトにご注目ください。 🎜🎜関連する推奨事項: 🎜🎜🎜AngularJS ドキュメント読み取りコマンドのスコープ🎜🎜🎜🎜🎜追加情報を追加するための AngularJS テーブルのエクスポート🎜🎜🎜

以上がAngularJS Excel エクスポート手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。