vue中使用excel导入导出

原文地址： https://www.cnblogs.com/liguiwang/p/8430672.html

感谢该大神的分享

1、在vue中使用导入导出，需要下载3个依赖包和2个js包：

 使用npm安装：

 npm install -S file-saver xlsx（这里其实安装了2个依赖）

 npm install -D script-loader

或者使用yarn安装：

yarn add file-saver

yarn add xlsx

yarn add script-loader --dev

2、在src目录下新建一个excel文件夹引入Blob.js和expor2Excal.js  

      下载地址：http://files.cnblogs.com/files/wangyunhui/vendor.rar

3、在main.js中全局引入：

import Blob from './excel/Blob.js'
import Export2Excel from './excel/Export2Excel.js'

4、webpack.base.conf.js做如下修改：

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'scss_vars': '@/styles/vars.scss',
      'excel': path.resolve(__dirname, '../src/excel'),//新增加一行
    }
  },

 

5、在页面中导出的时候调用outExe：

// 导出
            outExe() {
                this.$confirm('此操作将导出excel文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.excelData = this.dataList //你要导出的数据list。
                    this.export2Excel()
                }).catch(() => {
                
                });
            },
            export2Excel() {
                var that = this;
                require.ensure([], () => {
                    const { export_json_to_excel } = require('../../excel/Export2Excel'); //这里必须使用绝对路径
                    const tHeader = ['id','withNum', 'userId', 'name','amount','status','amountIn','amountSuccess','createTime']; // 导出的表头名
                    const filterVal = ['id','withNum','userId', 'name','amount','status','amountIn','amountSuccess','createTime']; // 导出的表头字段名
                    const list = that.excelData;
                    const data = that.formatJson(filterVal, list);
                    let time1,time2 = '';
                    if(this.start !== '') {
                        time1 = that.moment(that.start).format('YYYY-MM-DD')
                    }
                    if(this.end !== '') {
                        time2 = that.moment(that.end).format('YYYY-MM-DD')
                    }
                    export_json_to_excel(tHeader, data, `[${time1}-${time2}]提现管理excel`);// 导出的表格名称，根据需要自己命名
                })
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))
            }

 

6、在页面中导入的时候调用：

// 导入
// 导入 
<a href="javascript:;" class="file">导入表格
   <input id="upload" type="file" @change="importfxx(this)"  accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
</a><a href

            importfxx(obj) {
                let _this = this;
                let inputDOM = this.$refs.inputer;
                // 通过DOM取文件数据
                this.file = event.currentTarget.files[0];
                var rABS = false; //是否将文件读取为二进制字符串
                var f = this.file;
                var reader = new FileReader();
                //if (!FileReader.prototype.readAsBinaryString) {
                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]
                        let arr = []
                        this.da.map(v => {
                            let obj = {}
                            obj.id = v.id
                            obj.status = v.status
                            arr.push(obj)
                        })
                        console.log(arr)
                        let para = {
                            //withList: JSON.stringify(this.da)
                            withList: arr
                        }
                        _this.$message({
                            message: '请耐心等待导入成功',
                            type: 'success'
                        });
                        withImport(para).then(res => {
                            window.location.reload()
                        })
                        
                    }
                    reader.readAsArrayBuffer(f);
                }
                if(rABS) {
                    reader.readAsArrayBuffer(f);
                } else {
                    reader.readAsBinaryString(f);
                }
            },