AngularJS exporte les instructions Excel

Cet article présente principalement les instructions d'exportation Excel d'AngularJS, qui ont une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

ExcelIdées d'exportation

Article de référence - angulairejs utilise des instructions pour implémenter l'exportation de table csv

La fonction d'exportation

est utilisée dans le projet. Le professeur Pan a déjà implémenté les difficultés techniques de l'exportation de la table vers Excel dans son blog. Le reste est uniquement basé sur les besoins réels de l'entreprise pour améliorer cette directive. csv

Généralement rencontré les problèmes suivants :

Le bouton de fonction n'exporte pas

Car la commande d'origine exporte tout le contenu de la table par défaut, le premier Lors de l'exportation directe, nous avons constaté que les codes

des boutons d'affichage et d'édition étaient directement exportés. Ce que nous voulons, ce sont des informations sur le personnel et des informations sur les qualifications du personnel. La commande HTML

ajoute des paramètres : le nombre de colonnes de données valides.

Comme le montre la figure, les colonnes de données valides ici sont les villes, les districts, les comtés, etc. jusqu'à l'expiration de la période de validité. Il y a un total de

colonnes, qui sont transmises à la commande d'exportation comme. paramètres. 15

self.exportCols = scope.exportCols;

for (let i = 0; i Il s'avère que la boucle interne est constituée de toutes les colonnes de données, mais elle est maintenant modifiée en nombre de colonnes de données valides transmises. <p></p>Tableau croisé<h2></h2><p><img src="https://img.php.cn//upload/image/680/867/883/1531123509788663.png" title="1531123509788663.png" alt="AngularJS exporte les instructions Excel"></p>En prenant cette image comme exemple, la première ligne a <p> colonnes, mais les données de la deuxième ligne n'ont que <code>15</code> colonne, car les colonnes restantes sont affichées en définissant <code>4</code> dans la première ligne. En fait, il n'y a que <code>rowspan</code> qualifications du personnel <code>tr</code> dans le <code>4</code> de la deuxième ligne. <code>td</code></p><p><img src="https://img.php.cn//upload/image/843/685/233/1531123518744940.png" title="1531123518744940.png" alt="AngularJS exporte les instructions Excel"></p>Cela fait que la deuxième ligne n'a que quatre données lors de l'exportation, et elle est alignée à partir de la gauche, nous devons donc ajouter des données vides aux colonnes des lignes. <p></p>Ajoutez un jugement conditionnel et transmettez la longueur des colonnes restantes lorsqu'une colonne est à cheval, ce qui permet de distinguer s'il s'agit d'une colonne normale ou d'une colonne à cheval. <p></p><pre class="brush:php;toolbar:false">if (self.isNormalItem(rowData)) {
    // 如果该列为正常列，循环内容
    for (let j = 0; j Une colonne vide apparaît dans le certificat de qualification<h2></h2><p><img src="https://img.php.cn//upload/image/802/452/143/1531123537590884.png" title="1531123537590884.png" alt="AngularJS exporte les instructions Excel"></p>Comme une colonne vide doit être ajoutée pour le bouton Ajouter un certificat de qualification, une colonne vide apparaîtra également lors de l'exportation, l'effet n'est pas bon. <p></p><p><img src="https://img.php.cn//upload/image/767/939/808/1531123544352657.png" title="1531123544352657.png" alt="AngularJS exporte les instructions Excel"></p>Il faut donc juger lorsqu'une colonne barrée apparaît, il faut juger si les quatre derniers contenus de sa ligne précédente sont vides. vide, elle devrait l'être. Le contenu de cette colonne est déplacé vers la ligne précédente. <p></p><pre class="brush:php;toolbar:false">if (self.isNormalItem(rowData)) {
    // 如果该列为正常列，循环内容
    ...
} else if (self.isFirstItem(csvString)) {
    // 如果当前跨行资质是当前人员的第一个资质，则将该资质添加到上一行
    // 因为能添加人员资质的界面第一行的人员资质是空的，所以需要将该资
    // 质添加到上一行
    csvString = self.addDataToPreString(rowData, csvString);
} else {
    // 根据有效数据中的跨行列拼接空数据
    ...
}

Ajoutez un autre

Si la colonne actuellement traversée est la première qualification de la personne actuelle, ajoutez les données de qualification de cette ligne à l'espace vide de la qualification de la ligne précédente. else

Ce qui suit est la mise en œuvre spécifique de la méthode :

// 判断当前表格中资质是否是第一项资质
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 L'effet <p> final exporté : <code>csv</code></p><p><img src="https://img.php.cn//upload/image/976/352/627/1531123556704357.png" title="1531123556704357.png" alt="AngularJS exporte les instructions Excel"></p>Ce qui précède est le résumé de cet article. Tout le contenu, j'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois ! <p></p>Recommandations associées : <p></p><p class="comments-box-content">Portée des instructions de lecture de documents AngularJS<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">Exportation de table AngularJS pour ajouter des informations supplémentaires<a title="AngularJS 表格导出添加额外信息" href="http://www.php.cn/js-tutorial-406294.html" target="_blank"></a><br></p>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!