vue.js filter+匯出xlsx

by cactus77kiki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.10.8/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<div id="vapp">
  <h3>Vue.js - 資料filter 、 下載xlsx(json to xlsx,多個工作表)</h3>
  請輸入關鍵字：<input type="text" v-model.trim="dfilter"/>
  <button type="button" v-on:click="exportxls">輸出excel</button><br/>
  <span>(目前資料共：{{flist.length}}筆)</span>
  <ul>
    <li v-for="(row,index) in flist">
      ({{index+1}}){{row.name}} - {{row.email}}
    </li>
  </ul>
</div>

JavaScript

/*
範例: json資料下載excel改寫為元件參考： https://jsfiddle.net/cactus77kiki/rz31edgq/
other excel export library: https://github.com/jecovier/vue-json-excel/issues/57  (myexcel)
ref: https://github.com/SheetJS/sheetjs/issues/817
*/
var app = new Vue({
	el:'#vapp',
  data:{
  	dlist:[],    
    dfilter:""
  },
  methods:{
  	getdata:function(){
    	var self = this;
    	axios.get('https://jsonplaceholder.typicode.com/comments/')
    	.then(function (response) {
    		self.dlist=response.data;
        //console.log(response.data);      		
    	})
    	.catch(function (error) {
        console.log(error);
    	});
    },    
    exportxls: function(){    	
      var filename = 'download.xlsx';	//檔名                      
      //var data = this.flist ;    	
      //var sheetname = 'test';	//表名                         
      //downloadxlsx(filename, sheetname, data);	//下載
      expdatalist.push({data: this.flist, sheetname: 'test1'});
      expdatalist.push({data: this.dlist, sheetname: 'test2'});
      //downloadxlsx(filename);	
      downloadxlsx(filename);
    }
  }, 
  computed:{
  	flist: function(){   
    	//app.dfilter: callback function內，this.xxx代表此function
    	if(this.dfilter != ""){
      	var arry = this.dlist.filter(function(item){
        	return (item.name.indexOf(app.dfilter)>-1 || item.email.indexOf(app.dfilter)>-1);
        });
        return arry;
      }else{
      	return this.dlist;
      }
    }
  },  
  created:function(){
  	this.getdata();
  }
});
//import xlsx(-20200219-)

//export xlsx data object(參考使用)
var dataobj = {
	data: [],	//data
  sheetname: ""	//xlsx sheet name
}
var expdatalist = [];
//export xlsx
/*function downloadxlsx(filename, sheetname, data) {
	return export_json_to_excel(data, filename,sheetname);
}*/
function downloadxlsx(filename){
  filename = filename || "downloads.xlsx";	//預設值
  return export_json_to_excel(filename);
}
function s2ab(s) {
	var buf = new ArrayBuffer(s.length);
	var view = new Uint8Array(buf);
	for (var i=0;...