后台管理系统中的导入和导出excel（支持中文）

在main.js中引入全局引入excel插件

import Blob from './util/Blob.js'

import Export2Excel from './util/Export2Excel.js'

在后台管理系统中常用的两种

1.下载空模板&导入数据

template:

                <el-button type="primary" icon="el-icon-download" class="ib" @click="downloadTemplate" plain>下载商家清单模板</el-button>
                <el-button type="primary" icon="el-icon-upload2" class="upload_btn ib"> 导入商家清单 <input id="upload" class="file" type="file" @change="importfxx(this)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
                </el-button>

css:

<style scoped> .upload_btn{ position: relative; margin-bottom: 10px;} .upload_btn .file{position: absolute;left: 0;top: 0;height: 100%;width: 100%; opacity: 0;cursor: pointer;} </style>

methods:

 //下载模板
      downloadTemplate:function(){ var that = this; require.ensure([], () => { const { export_json_to_excel } = require('../../../util/Export2Excel'); //这里必须使用绝对路径
                  const tHeader = ['一','二','三','四']; // 导出的表头名
                  export_json_to_excel(tHeader, [], `模板`);// 导出的表格名称，根据需要自己命名
 }) }, //导入商家清单
      importfxx:function(obj){ let _this = this; let inputDOM = this.$refs.inputer; // 通过DOM取文件数据
          _this.excellist=[]; this.file = event.currentTarget.files[0]; var rABS = false; //是否将文件读取为二进制字符串
          var f = this.file; var reader = new FileReader(); FileReader.prototype.readAsBinaryString = function(f) { var binary = ""; var rABS = false; //是否将文件读取为二进制字符串
              var pt = this; var wb; //读取完成的数据
              var outdata; var reader = new FileReader(); reader.onload = function(e) { var bytes = new Uint8Array(reader.result); var length = bytes.byteLength; for(var i = 0; i < length; i++) { binary += String.fromCharCode(bytes[i]); } var XLSX = require('xlsx'); if(rABS) { wb = XLSX.read(btoa(fixdata(binary)), { //手动转化
                          type: 'base64' }); } else { wb = XLSX.read(binary, { type: 'binary' }); } outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);//outdata就是你想要的东西
                  this.da = [...outdata] this.da.map(v => { let obj = {} obj.a= v['一']; obj.b = v['二']; obj.c = v['三']; obj.d = v['四']; _this.excellist.push(obj);//导入生成数据
 }) } reader.readAsArrayBuffer(f); } if(rABS) { reader.readAsArrayBuffer(f); } else { reader.readAsBinaryString(f); } document.getElementById('upload').value = ''; },

_this.excellist=[];记得在导入之前把所有数据清空
document.getElementById('upload').value = '';加上这一句，可以解决change事件无法重复导入的问题
2.下载有数据的excel文件
methods:

 export2Excel(allData) { var that = this; require.ensure([], () => { const { export_json_to_excel } = require('../../../util/Export2Excel'); //这里必须使用绝对路径
                const tHeader = ['一','二','三','四']; // 导出的表头名
                const filterVal = ['a','b','c','d']; // 导出的表头字段名
                const list = allData; const data = that.formatJson(filterVal, list); export_json_to_excel(tHeader, data, `表格名称`);// 导出的表格名称，根据需要自己命名
 }) }, formatJson(filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => v[j])) },

tHeader是表头，allData是所有数据的数组，filterVal是数组中对象的属性