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文件在文章末尾）

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文件，且不超过500kb</div> -->
              </el-upload>