后台管理系統中的導入和導出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是數組中對象的屬性