vue+element純前端實現導出表格數據爲csv Vue + js-xlsx實現文件導入導出

vue+element
純前端實現導出表格數據爲csv

<template>
	<el-button type="primary" size="mini" class="page_breadcrumb_btn" @click="getExportList">導出</el-button>
</template>

export default {
    name:'userInfo',
    data() {
    	tableData: [{
			user_id:'',
            id:'',
            username:'',
            piname:'',
            createtime:'',
            firstLoginTime:'',
            system:'',
            lastLoginTime:''
		}]
    },
	methods: {
		getExportList() {
	            const _self=this
	            let jsonData = {
	                trade:{
	                    tHeader: ["用戶標識","用戶名稱","創建人","創建時間","首次登錄時間","來源系統","最近登錄時間"],
	                    filterVal: ["user_id","username","piname","createtime","firstLoginTime","system","lastLoginTime"],
	                    list: _self.tableData
	                }
	            }    
	            _self.exportPathMethod(jsonData)// 調用exportPathMethod對數據進行處理導出
	            _self.exportShow=false
	        },
	        exportPathMethod(data) {
	            /*
	            *注：csv文件：","逗號換列，\n換行，\t防止excel將長數字變科學計算法等樣式
	            */
	            //要導出的json數據
	            let mainLists = data.trade   //主表
	            let _self = this
	            //## 數據處理
	            //一級表
	            let mainTitle = mainLists.tHeader;//一級標題
	            let mainTitleForKey = mainLists.filterVal;//一級過濾
	            let mainList = mainLists.list;//一級數據
	            let mainStr = [];
	            mainStr.push(mainTitle.join("\t,")+"\n");   //標題添加上換列轉成字符串並存進數組
	            for(let i=0;i<mainList.length;i++){
	                let temp = [];
	                for(let j=0;j<mainTitleForKey.length;j++){
	                    temp.push(mainList[i][mainTitleForKey[j]]); //根據過濾器拿出對應的值
	                }
	                mainStr.push(temp.join("\t,")+"\n");    //取出來的值加上逗號換列轉字符串存數組
	            }
	            // console.log(JSON.stringify(mainStr.join("")));//打印文本
	
	            //兩個表數組轉成字符串合併
	            let merged = mainStr.join("")
	            //console.log(JSON.stringify(merged));//打印結果
	            
	            //## 導出操作
	            // encodeURIComponent解決中文亂碼
	            const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(merged)
	            // 通過創建a標籤實現
	            let link = document.createElement('a')
	            link.href = uri
	            // 對下載的文件命名
	            link.download = `用戶信息${_self.$moment(_self.$moment().valueOf()).format('YYYYMMDD')}.csv`
	            document.body.appendChild(link)
	            link.click()
	        }
	}
}

Vue + js-xlsx實現文件導入導出

Js-xlsx 安裝 npm: npm install xlsx

導出

import XLSX from 'xlsx'

outputXlsxFile ()  {
   let _self = this
   let tableList=[]
   let tableDataList=[]
   _self.tableList.forEach(item => {
       tableList.push({
           "用戶標識":item.admin_id,
           "用戶名稱":item.username,
           "創建人":item.piname,
           "創建時間":item.create_time,
           "首次登錄時間":item.firstLoginTime,
           "來源系統":item.system,
           "最近登錄時間":item.login_time
       })
   })
   _self.tableDataList.forEach(item => {
       tableDataList.push({
           "用戶標識":item.admin_id,
           "用戶名稱":item.username,
           "創建人":item.piname,
           "創建時間":item.create_time,
           "首次登錄時間":item.firstLoginTime,
           "來源系統":item.system,
           "最近登錄時間":item.login_time
       })
   })
   let data = _self.export_pagination === '1' ? tableList:tableDataList
   let header = {header: ["用戶標識","用戶名稱","創建人","創建時間","首次登錄時間","來源系統","最近登錄時間"] }
   let ws = XLSX.utils.json_to_sheet(data, header)
   let wb = XLSX.utils.book_new()
   XLSX.utils.book_append_sheet(wb, ws, `用戶信息${_self.$moment(_self.$moment().valueOf()).format('YYYYMMDD')}.csv`)
   XLSX.writeFile(wb, `用戶信息${_self.$moment(_self.$moment().valueOf()).format('YYYYMMDD')}.csv`)
}

導入

import XLSX from 'xlsx'
// file是傳進來excel文件
getExcelFileData(file) {
	var excelData = []
	//聲明一個文件讀取器
	const fileReader = new FileReader()
	//文件讀取成功時觸發事件
	fileReader.onload=ev=>{
		try{
			讀取的文件
			const data = ev.target.result
			//以二進制流方式讀取得到整份excel表格
			const workbook = XLSX.read(data,{type:'binary'})對象
			// 循環遍歷excel的sheet
			Object.keys(workbook.Sheets).forEach((sheet,index)=>{
				console.info(workbook.Sheets[sheet]['!ref'])
				excelData.push(
					       //
					將excel 轉換成json對象放入數組中
					...XLSX.utils.sheet_to_json(workbook.Sheets[sheet])
				)
			})
			// 自定義事件，比如校驗excel數據。轉換數據格式…
			checkingExcelData(excelData)
		}catch(e){
			console.err('文件類型不正確'）
		}
	}
	//讀取文件
	fileReader.readAsBinaryString(file)
}