Comment exporter le partage d'instance Excel dans AngularJS-js tutoriel-php.cn

Comment exporter le partage d'instance Excel dans AngularJS

小云云

Libérer： 2018-03-16 16:22:37

original

2556 Les gens l'ont consulté

Cet article vous explique principalement comment exporter des instances Excel avec angulairejs. J'espère qu'il pourra vous aider.

Méthode d'exportation Excel d'angularjs 1.x, il existe 2 méthodes couramment utilisées

1 Exporter directement le tableau vers xls

ajouter
. au service

homeServiceMoudule.factory(&#39;Excel&#39;,[&#39;$window&#39;, &#39;$sce&#39;,&#39;ConfigService&#39;, &#39;$localStorage&#39;,function($window, $sce, ConfigService,$localStorage){
    var uri=&#39;data:application/vnd.ms-excel;base64,&#39;;
    var template=&#39;<html xmlns:o="urn:schemas-microsoft-com:office:office" 
    xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head>
    <!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
    <x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/>
    </x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook>
    </xml><![endif]--></head><body><table>{table}</table></body></html>&#39;;
    var base64=function(s){return window.btoa(window.unescape(encodeURIComponent(s)));};
    var format=function(s,c){return s.replace(/{(\w+)}/g,function(m,p){return c[p];});};
    return {
        tableToExcel:function(tableId,worksheetName){
            var table=window.$(tableId),
                ctx={worksheet:worksheetName,table:table.html()},
                href=uri+base64(format(template,ctx));
            return href;
        }
    };
}]);

Copier après la connexion

data:application/vnd.ms-excel

Copier après la connexion

Compatible avec les anciennes versions, la version exportée est 2003 xls.

Si modifié par :

data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

Copier après la connexion

Exporter vers 2007 xlsx.

Introduire 'Excel' dans le contrôleur

puis écrire le appelez

$scope.exportToExcel=function(tableId){

      var exportHref=Excel.tableToExcel(tableId,  &#39;worksheetName&#39;);
          $timeout(function(){location.href=exportHref;},500);
};

Copier après la connexion

Ajouter un bouton d'exportation au html

<button class="btn btn-link" style="float:right" ng-click="exportToExcel(&#39;#tableExcel&#39;)">
		    <span class="glyphicon glyphicon-share">导出Excel</span> 
		</button>

Copier après la connexion

N'oubliez pas d'ajouter id="tableExcel" à la balise du tableau à exporter

Remarque :

1. Le nom du fichier exporté est aléatoire et il faut faire attention au format du numéro exporté, il peut être daté par Excel,

2. J'ai rencontré un bug avec le nombre de lignes de données, 1600 lignes. Pas de problème. S'il y en a trop, une erreur d'export se produira et la page passera à une page vierge.

2. L'exportation directe des données

nécessite l'introduction de 2 outils :

Comment exporter le partage dinstance Excel dans AngularJS

Introduire xlsx.core.min.js et alasql. js

cas d'utilisation : exporter directement les données vers le xslx 2007

et écrire des appels logiques dans le contrôleur

//导出为excel
$scope.exportToExcel=function( ){ // ex: &#39;#my-table&#39;
	var excelArrs = getExcelData();
	 alasql.promise(&#39;SELECT * INTO XLSX("fileName&#39; + &#39;.xlsx",{headers:true}) FROM ?&#39;,[excelArrs])
		.then(function (data) {
		  if(data == 1){
			$timeout(function(){
			  console.log(&#39;数据导出成功！&#39;);
			})
		  }
		});
};

//组装ecxel数据
function getExcelData() {
	var var arr =[];
	var columns = 30;
	angular.forEach(dateList, function(data, index, datas) {
		var newObj = {
			column1:data.column1,
			column2:data.column2
		};
		var column = 0;
		if(data.hasOwnProperty(&#39;minList&#39;)) {
			var minList = data.minList; 
			if(minList != null && minList.length > 0){
				angular.forEach(minList, function(dataM, indexM, datasM) {
					if(dataM){
						if(dataM.value){
							column++;
							newObj["value"+indexM] = dataM.value;
							if(dataM.predict)
								newObj["date"+indexM] = dataM.date;
						}
					}
				});
			}
		}
		for(;column < columns ; column++){
			newObj["value"+column] = 	"";
			newObj["date"+column] = "";
		}
		arr.push(newObj);
	});
	return arr;
}

Copier après la connexion

ajouter un bouton d'appel à le html

<button class="btn btn-link"  ng-click="exportToExcel()">
			    <span class="glyphicon glyphicon-share">导出Excel</span> 
			</button>

Copier après la connexion

Remarque

1. Les attributs du premier élément du tableau de données exporté déterminent l'en-tête du fichier. Si le premier n'a que 2 attributs, les éléments suivants du tableau le seront. avoir plus d'éléments. Les valeurs de propriété ne sont pas non plus exportées. Tous les attributs doivent être remplis avec le premier élément.

2. Le nom du fichier d'exportation peut être nommé, mais le nom de la table ne peut pas être nommé.

Recommandations associées :

Cinq méthodes JS pour exporter Excel

Méthodes PHP pour exporter des fichiers de contenu HTML dans Excel

php utilise une méthode native pour exporter le partage d'instance Excel

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!