Heim >Web-Frontend >js-Tutorial >So exportieren Sie die Excel-Instanzfreigabe in AngularJS

So exportieren Sie die Excel-Instanzfreigabe in AngularJS

小云云Original: 2018-03-16 16:22:372558Durchsuche

In diesem Artikel erfahren Sie hauptsächlich, wie Sie Excel-Instanzen mit AngularJS exportieren. Ich hoffe, er kann Ihnen helfen.

Angularjs 1.x-Export-Excel-Methode, es gibt 2 häufig verwendete Methoden

1 Tabelle direkt als XLS exportieren

hinzufügen
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;
        }
    };
}]);

data:application/vnd.ms-excel

Kompatibel mit älteren Versionen, die exportierte Version ist 2003 xls.

Bei Änderung in:

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

Export nach 2007 xlsx.

Geben Sie „Excel“ in den Controller ein

und schreiben Sie dann die Rufen Sie

$scope.exportToExcel=function(tableId){

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

Exportschaltfläche zu HTML hinzufügen

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

Denken Sie daran, id="tableExcel" zum zu exportierenden Tabellen-Tag hinzuzufügen

Hinweis:

1. Der exportierte Dateiname ist zufällig. Sie müssen auf das exportierte Zahlenformat achten, das im Chrome-Browser datiert sein kann Es ist ein Fehler mit der Anzahl der Datenzeilen aufgetreten, 1600 Zeilen. Wenn es zu viele sind, tritt ein Exportfehler auf und die Seite springt auf eine leere Seite.

2. Der direkte Export von Daten

erfordert die Einführung von 2 Tools:

So exportieren Sie die Excel-Instanzfreigabe in AngularJS Einführen von xlsx.core.min.js und alasql. js

Anwendungsfall: Daten direkt in 2007 xslx exportieren

und logische Aufrufe in den Controller schreiben

eine Anrufschaltfläche hinzufügen Der HTML-

//导出为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;
}

Hinweis

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

1. Die Attribute des ersten Elements des exportierten Datenarrays bestimmen den Dateikopf. Wenn das erste nur 2 Attribute hat, gilt dies für die nachfolgenden Array-Elemente Weitere Eigenschaftswerte werden ebenfalls nicht exportiert. Alle Attribute müssen im ersten Element ausgefüllt werden.

2. Der Name der Exportdatei kann benannt werden, der Tabellenname kann jedoch nicht benannt werden.

Verwandte Empfehlungen:

Fünf JS-Methoden zum Exportieren von Excel

PHP-Methoden zum Exportieren von HTML-Inhaltsdateien in Excel

PHP verwendet eine native Methode zum Exportieren der Excel-Instanzfreigabe

Das obige ist der detaillierte Inhalt vonSo exportieren Sie die Excel-Instanzfreigabe in AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JavaScript-Code, um Elemente einzeln auszublendenNächster Artikel：JavaScript-Code, um Elemente einzeln auszublenden

In Verbindung stehende Artikel

Mehr sehen