vue中使用excel导入导出

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

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>

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); } },

 

posted @ 2018-02-08 11:11  LGW0  阅读(83875)  评论(7编辑  收藏  举报