Vue+Element导入导出Excel

一，安装
npm install -S file-saver xlsx
npm install -D script-loader

二，导入Excel
1，Element 上传控件

<el-upload
  action="/"
  :on-change="onChange"
  :auto-upload="false"
  :show-file-list="false"
  accept=".xls, .xlsx"
  :style="{'float': 'left'}">
      <el-button size="small" type="primary">选择文件</el-button>
  </el-upload>

onChange(file, fileList) {
            // 调用读取数据的方法
            let res = this.TableData
            let num = this.total
            readExcel(file, res, num)
            setTimeout(res => {
                this.total = this.TableData.length 
            }, 300) 
        }, 

import XLSX from 'xlsx'
//读取文件数据
// 参数：读取的文件， 已有数据列表， 已有数据的数量
export function readExcel(files, outputs, num) {
    if (!files) {
        //如果没有文件
        return false;
    } else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
        this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
        return false;
    }
    let number = 0
    const fileReader = new FileReader();
    fileReader.onload = ev => {
        try {
            const data = ev.target.result;
            const workbook = XLSX.read(data, {
                type: "binary"
            });
            //导入的文件名称
            const wsname = workbook.SheetNames[0]; //取第一张表
            const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
            number =  num + ws.length
            // 存放表头字段
            let tableHeader = []
            for (let val in outputs[0]) {
                tableHeader.push(val)
            }
            // 追加文件内的内容到 outputs
            for (let i = 0; i < ws.length; i++) {
                var sheetData = {}
                for (let j=0; j<tableHeader.length; j++) {
                    sheetData[tableHeader[j]] = ws[i][tableHeader[j]];
                    
                }
                outputs.push(sheetData);
            }
            // console.log("outputs", outputs) 
        }
        catch (e) {
            console.log(e);
            return false;
        }
    };
    // 如果为原生 input 则应是 files[0]
    fileReader.readAsBinaryString(files.raw);
    
    setTimeout(res => {
        return number
    },10)
    
}

三，导出Excel
1，将其中的2个JS文件放入到自己的工程中。
这几个文件不支持import引入，所以需要script-loader来将他们挂载到全局环境下
2，导出函数

export function getExcel(res) {
    // res 是需要导出的列表[{},{}]
    require.ensure([], () => {
        const { export_json_to_excel } = require('./Export2Excel')
        // 获取全部字段名  作为表头
        const filterVal = []
        const tHeader = []
        for(let key  in res[0]){
            filterVal.push(key)
            tHeader.push(key)
        }
        // tHeader为导出Excel表头名称
        const data = res.map(v => filterVal.map(j => v[j]))
        // TableData  即为导出Excel名称
        export_json_to_excel(tHeader, data, 'TableData')
    })
}

这里的引用请根据自己的层级关系和文件夹命名require(’…/…/introduce/Export2Excel.js’)

res为传入的数组，格式如：res =[{name:‘小白’,age:‘18’},{name:‘小黑’,age:‘16’}]

tHeader为导出Excel表头名称，导出列表名称即为导出Excel名称

下载的Excel位置根据浏览器设置的下载位置而定