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>

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.οnlοad=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重复导入问题!

来源：CSDN

作者：sinat_thui

链接：https://blog.csdn.net/sinat_41680914/article/details/84324430

标签

vue

电子表格

blob