前端导入导出

vue+elementUI做一个后台管理系统，其中表格最简单的导入导出功能

import FileSaver from 'file-saver'
import XLSX from 'xlsx'
//导出
//HTML

 <el-table class="excelTable" :data="excelData" border v-show="false">
	<el-table-column label="串码" prop="QMNO"></el-table-column>
</el-table>

<el-button class="billButton" type="primary" @click="exportExcel">导出</el-button>

//方法
exportExcel () {
	 var wb = XLSX.utils.table_to_book(document.querySelector('.excelTable'))//需要导出的表格的节点
	 var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
	 try {
	        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '导出的Excel名字.xlsx')
	    } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
	     return wbout
 },

//导入
//HTML

<vue-xlsx-table class="billButton"  @on-select-file="importEXCEL" style="margin: 0 10px;">导入</vue-xlsx-table>

<el-dialog  title="串码导入"  :visible.sync="excelDialogVisible">
    <el-table :data="excelTableData" border>
    <el-table-column  label="串码" prop ="QMNO"  show-overflow-tooltip></el-table-column>
    </el-table>
		  
    <span slot="footer" class="dialog-footer">
	 <el-button @click="excelDialogVisible = false">取消</el-button>
	  <el-button type="primary" @click="excelCommit">确定</el-button>
    </span>

</el-dialog>
            
//导入
    importEXCEL(data){
	 this.excelTableData = []
	  for(var item of data.body){
	    	this.excelTableData.push({
			QMNO:item.串码,
		})
	   }
	this.excelTableHeader = data.header
	this.excelDialogVisible = true
       },
//导入确定
	excelCommit(){
		this.passTable = this.passTable.concat(this.excelTableData)
		 this.excelDialogVisible = false
        },

//补充
一个报表，进入页面有分页，但是导出的却是全部数据。以上绑定Dom的方法就不行了，浏览器直接崩溃，后来查资料解决了问题。但是不能兼容IE9一下：

//导出
			formatJson(filterVal, jsonData) {
				return jsonData.map(v => filterVal.map(j => v[j]))
			},
			exportExcel () {
				if(navigator.appName == "Microsoft Internet Explorer"&&parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE",""))<10){
					alert("您的浏览器版本过低，请下载IE9及以上版本");
				}else{
					require.ensure([], () => {　　　　　　　　
						const { export_json_to_excel } = require('../../../../vendor/Export2Excel');　　//引入文件　　
						//将对应的属性名转换成中文　　　　
						const tHeader = ['货主', '货主描述',"仓库","仓库描述","库存地点","库存地点描述","物料编码","物料描述","库存数量"]; 
					　	//table表格中对应的属性名　　　　　　　　
						const filterVal = ['BUKRS', 'BUTXT',"WERKS","WETXT","LGORT","LGOBE","MATNR","MAKTX","MENGE"];　　　　 　　　
						const list = this.stockData
						const data = this.formatJson(filterVal, list)　　　　　　
						export_json_to_excel(tHeader, data, '库存报表');　　　　　　
					})
				}
				
		    },

//vendor文件网上可以直接下载到项目

详细介绍 ： https://www.cnblogs.com/liguiwang/p/8430672.html