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)
}