vue.js-excel上傳+匯出html

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/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="app">
  <h3>Vue.js - xlsx單檔單工作表上傳、顯示上傳內容；html內容匯出xlsx</h3>
  <input type="file" @change="processupload">
  <br/><br/>  
  上傳資料筆數：{{rowcount}}筆<br/>  
  上傳內容：
  <table class="table table-bordered jsontable" id="apptable">    
    <thead>
      <th v-for="(row,index) in filetitle">
        {{row}}
      </th>
    </thead>
    <tbody>
      <tr v-for="(row,index) in filedata" >
        <!--<td>{{row.This}}</td>
        <td>{{row.is}}</td>
        <td>{{row.a}}</td>
        <td>{{row.Test}}</td>-->
        
        <!--<td>{{row.postId}}</td>
        <td>{{row.id}}</td>
        <td>{{row.name}}</td>
        <td>{{row.email}}</td>
        <td>{{row.body}}</td>-->
        <td v-for="title in filetitle">{{row[title]}}</td>
      </tr>
    </tbody>
  </table> 
  <br/>
  <button v-if="filedata.length>0" @click="exporthtml">表格資料匯出(html匯出)</button><br/>
  title:{{filetitle}}
  <br/>
  資料轉Json：
  {{filedata}}
</div>

CSS

table.jsontable {
  border-collapse: collapse;  
  width: 100%;
}

table.jsontable, .jsontable th, .jsontable td {
  text-align: left;
  padding: 8px;
  border: 1px solid #ddd;
  /*border-bottom: 1px solid #ddd;*/
}

.jsontable th {
  background-color: #7095F6;
  color: white;
}

.jsontable tr:nth-child(even) {background-color: #f2f2f2;}

JavaScript

/*
範例：vue.js-excel上傳+匯出html
上傳excel轉json改寫為元件參考： https://jsfiddle.net/cactus77kiki/om1fhzw3/

ref: 
upload file(vue)
https://forum.vuejs.org/t/vuejs2-file-input/633/2
upload file and priview(vue)
https://codepen.io/Atinux/pen/qOvawK/
read xlsx(js)
https://codepen.io/serazo/pen/veVwxZ
table css
https://www.w3schools.com/css/css_table.asp
*/
var obj = [];
var vapp=new Vue({
	el:"#app",
  data:{
  	//filedata:[]    //上傳資料(轉json資料)
    filedata: obj
  },
  computed:{
  	//取得物件title
  	filetitle: function(){
    	var fileary = this.filedata;
    	if(fileary.length == 0)
      	return [];
      else{
      	var arry = Object.keys(fileary[0]);
        return arry;
      }
    },
    rowcount: function(){
    	var fileary = this.filedata;
      if(fileary.length == 0)
      	return 0;
      else
      	return fileary.length;
    }
  },
  methods:{  	
  	//上傳
  	processupload: function(e){
    	var files = e.target.files || e.dataTransfer.files;
      if (!files.length)
        return;   
      filetojson(files[0]);
    },
    //html匯出
    exporthtml: function(){    	
    	return export_table_to_excel("apptable","downloadtest","sheet_1");      	
    }
  }
});

function filetojson(file){
	var reader = new FileReader();  
  reader.onload = function(e) {
    var data = e.target.result;
    workbook = XLSX.read(data, {type: 'binary' });
    var first_sheet_name = workbook.SheetNames[0];
    var worksheet = workbook.Sheets[first_sheet_name];  	    
    var jsondata = XLSX.utils.sheet_to_json(worksheet,{raw:true});    
    //vapp.filedata = jsondata;
    //obj = jsondata;    
    console.log(jsondata);
    for(var i = 0; i <jsondata.length; i++){    	
    	obj.push(jsondata[i]);
    }
    //console.log(jsondata);
  };  
  reader.readAsBinaryString(file);
}

//param:html id. filename: 檔名(不含檔案類型). sheetname: 工作表名稱
function export_table_to_excel(param,filename,sheetname){
	var type="xlsx";
  var fn=filename || 'test';
	var wb =...