vue 中excel导入导出功能实现

1  安装依赖

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

 npm install -D script-loade

2  main.js全局引入Blob.js和Export2Excel.js

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

 

3 build目录下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'),//新增加一行
    }
  },

4 主要代码

HTML:

                <el-button type="primary" class="checkBtn" style="position:relative;width:120px" @click="updata">导入Excel </el-button>

               <input id="input-file" type="file" v-if="ishowFile" @change="importfRM(this,$event)" style="display:none;position:absolute;left:0;top:0" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />

 

js:

        // 导入Excel

        importfRM(obj,e) {

            let _this = this;

            var event=window.event||e;

            var file = event.currentTarget.files[0];

            this.ishowFile = true;

        // var rABS = false; //是否将文件读取为二进制字符串

            if(file) {

                var reader=new FileReader();

                reader.onload=function() {

                    var bytes = new Uint8Array(reader.result);

                    var resp_data=window.btoa(String.fromCharCode.apply(null, bytes));

                    // console.log(resp_data)

                    let para={

                        FileData:resp_data,

                        FileName:file.name,

                        UserId:util.formatDate.getUser().id

                    }

                    importLayoutExcel(para).then(res=>{

                        if(res.data.flag){

                            // window.location.reload()

                            // this.getCheck();

                            _this.$message({

                                message:res.data.message,

                                type:'success'

                            })

                            // window.location.reload()

                            _this.getLayout();

                        }else{

                            _this.$message({

                                message:res.data.message,

                                type:'warning'

                            })

                        }

                        // this.total = res.data.totalRows;

                        // this.entities = res.data.entities;

                    })

                }

                reader.readAsArrayBuffer(file);

            }

            else{

                alert("请导入文件");

            }

        },

 

        // 导出Excel

        exportExcel(){

            this.isExport=false;

            let exportData = this.filters;

            let obj={

                BeginTime:exportData.startTime,

                EndTime:exportData.endTime,

                Start:this.exportData.Start,

                End:this.exportData.End

            }

            let para= Object.assign({},obj, exportData);

            // console.log(para)

            if(this.OcheckStart.isDown&&this.OcheckEnd.isDown){

                exportExcelLayout(para).then(res=>{

                    // console.log(res);

                    FileSaver.saveAs(new Blob([res.data], {

                        type: "application/octet-stream;charset=utf-8"

                    }), "name.xlsx");

                }).catch(err=>{

                    console.log(err)

                })

            }

        },

注:exportExcelLayout()和importLayoutExcel()是封装好的axios请求函数

 

        // 功能:点击触发input file change函数,销毁节点

        updata(){

            $('#input-file').click();

            this.ishowFile = false // 销毁

        },

        // 冒泡重载节点

        reFile(){

            this.ishowFile = true // 重建

        },

注:ishowFile控制文件加载标签的销毁和重建,目的是为了解决excel重复导入问题!

展开阅读全文

没有更多推荐了,返回首页