Vue+Element ui 对excel的导入和导出

Vue+Element对Excel表导入和导出

1.安装依赖包

npm install -S file-saver xlsx

npm install -D script-loader

2.引入js文件Blob.js和Export2Excel.js

可以将Blob.js和Export2Excel.js两个文件放入src/assests/js中如图所示,(注:这两个js文件在文章末尾)

123

3.导出

(1)导出按钮

<el-button type="success" icon="el-icon-download" @click="exportToExcel">导出</el-button>

(2)导出方法

​
 // 导出
    // 定义导出Excel表格事件
    exportToExcel () {
      /* 从表生成工作簿对象 */
      // var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
      // /* 获取二进制字符串作为输出 */
      // var wbout = XLSX.write(wb, {
      //     bookType: "xlsx",
      //     bookSST: true,
      //     type: "array"
      // });
      // try {
      //     FileSaver.saveAs(
      //         //Blob 对象表示一个不可变、原始数据的类文件对象。
      //         //Blob 表示的不一定是JavaScript原生格式的数据。
      //         //File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
      //         //返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
      //         new Blob([wbout], { type: "application/octet-stream" }),
      //         //设置导出文件名称
      //         "导出表格.xlsx"
      //     );
      //     console.log("wbout:", wbout);
      // } catch (e) {
      //     if (typeof console !== "undefined")
      //     console.log(e, wbout);
      // }
      // return wbout;
      this.$confirm('确定下载列表文件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.excelData = this.tableData // 你要导出的数据list。
        this.export2Excel()
      }).catch(() => {})
    },
    export2Excel () {
      var that = this
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/assets/js/Export2Excel.js')// js文件的位置
        const tHeader = ['序号', '姓名', '成绩']
        const filterVal = ['index', 'name', 'score'] // 导出的表头字段名,需要导出表格字段名
        const list = that.tableData
        const data = that.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, '成绩表')// 导出的表格名称,根据需要自己命名
      })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },

​

4.导入

(1)导入按钮

  <el-button type="warning" icon="el-icon-upload2" @click="uploadDialog=true">导入</el-button>

(2)导入的对话框

 <el-dialog title="上传文件" :visible.sync="uploadDialog" class="eldialog" width="30%" @close="closeDialog">
          <el-form id="addForm" ref="addForm" class="eldialogForm">
            <el-form-item label>
              <el-upload
                ref="upload"
                class="upload-demo"
                drag
                action=""
                :on-change="handleChange"
                :on-exceed="handleExceed"
                :on-remove="handleRemove"
                :file-list="fileListUpload"
                :limit="limitUpload"
                accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
                :auto-upload="false"
              >
                <i class="el-icon-upload" />
                <div class="el-upload__text">
                  将文件拖到此处,或
                  <em>点击上传</em>
                </div>
                <!-- <div slot="tip" class="el-upload__tip">只能上传Excel文件,且不超过500
  • 4
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值