vue导入导出excel element-ui upload axios

最新推荐文章于 2024-12-24 16:39:59 发布

原创最新推荐文章于 2024-12-24 16:39:59 发布 · 616 阅读

0 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

7 篇文章

订阅专栏

element-ui

6 篇文章

订阅专栏

本文介绍了一种在网页应用中实现表格数据批量导入导出的方法。通过使用Element UI组件库，结合axios进行前后端交互，实现了从Excel文件导入数据到数据库以及将数据库中的数据导出为Excel文件的功能。代码示例详细展示了如何设置上传组件的属性，如限制文件类型为xlsx，并定义了导出函数，利用axios发送GET请求，以blob形式接收响应并下载为Excel文件。

          <el-button
            class="filter-item"
            size="small"
            @click="batchExport"
            type="primary"
            icon="edit"
          >表格导出</el-button>
          <el-upload
            class="upload-demo"
            action="/operation/commentPool/importExcel"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
            :on-success="handleSuccess"
            multiple
            :show-file-list="true"
          >
            <el-button size="small" type="primary">表格导入</el-button>
          </el-upload>


 
methods:{
    //导出表格
    batchExport: function() {
      axios({
        url: "/operation/commentPool/export",//接口地址
        method: "get",
        responseType: "blob",
        params: {
          timeType: timeType,
        }
      })
        .then(response => {
          let blob = new Blob([response.data], {
            type:
              "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          });
          let url = window.URL.createObjectURL(blob); 
          let a = document.createElement("a");
          a.href = url;
          a.download = "用户注册表.xlsx";
          a.click();
          window.URL.revokeObjectURL(url);
        })
        .catch(err => {
          console.log(err);
        });
    },
}