angularjs で Excel インスタンス共有をエクスポートする方法-jsチュートリアル-php.cn

angularjs で Excel インスタンス共有をエクスポートする方法

小云云

リリース： 2018-03-16 16:22:37

オリジナル

2476 人が閲覧しました

この記事では主に angularjs で Excel インスタンスをエクスポートする方法について説明します。お役に立てれば幸いです。

angularjs 1.x の Excel エクスポート方法には、一般的に使用される方法が 2 つあります

1. テーブルを xls に直接エクスポートします

古いバージョンと互換性を持たせるためにサービスに

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

ログイン後にコピー

を追加し、エクスポートされた xls 2003年です。

次のように変更した場合:

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

ログイン後にコピー

2007 xlsx.にエクスポート

コントローラーに「Excel」を導入します

次に、呼び出し

$scope.exportToExcel=function(tableId){

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

ログイン後にコピー

htmlを記述してエクスポートボタンを追加します

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

ログイン後にコピー

テーブルタグを忘れずに追加してくださいid="tableExcel"

注:

1. エクスポートされるファイル名はランダムであり、Excel によって日付が付けられる場合があるので注意する必要があります

2. , データ行数に関するバグが発生しました。1,600 行を超えるとエクスポートに失敗し、空白のページにジャンプします。これは Firefox では正常です。

2. データを直接エクスポートする

2 つのツールを導入する必要があります:

angularjs で Excel インスタンス共有をエクスポートする方法

xlsx.core.min.js と alasql.js をページに導入します

使用例: 2007 xslx を使用してデータを直接エクスポートします

コントローラーに論理呼び出しを記述します

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

ログイン後にコピー

html に呼び出しボタンを追加します

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

ログイン後にコピー

注

1. 最初の要素に属性が 2 つしかない場合は、エクスポートされたデータ配列の最初の要素の属性によって決まります。後続の配列要素は、属性値がいくつあってもエクスポートされません。すべての属性には最初の要素を入力する必要があります。

2. エクスポートファイル名は指定できますが、テーブル名は指定できません。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

angularjs で Excel インスタンス共有をエクスポートする方法