美文网首页
vue中前端导出Excel

vue中前端导出Excel

作者: 辉色星空下 | 来源:发表于2023-05-24 15:44 被阅读0次

    在这里使用的是vue-json-excel这个插件
    首先安装插件

    npm install --save vue-json-excel
    

    然后在项目文件中引入并使用

    import JsonExcel from "vue-json-excel";
    
    <JsonExcel
           class="downloadExcel import-btn"
          :data="allExportData"
           :fields="excelField"
           worksheet="My Worksheet"
           :name="`文件名称.xls`"
    >
                <el-button type="primary">导出</el-button>
    </JsonExcel>
    //在data中定义变量
    allExportData: [],
    excelField: {}
    //在method中定义
    setAllExportData() {
        //获取所有的列
        let column= 你的表格的列数组
        column.map(
            item => {
              if (
                item.property !== undefined &&
                item.type !== "selection" &&
                item.type !== "radio"
              ) {
                if (
                  item.visible === true ||
                  Object.prototype.toString.call(item.visible) ===
                    "[object Undefined]"
                ) {
                  //设置导出表格字段
                  this.excelField[item.title] = item.property;
                }
              }
            }
          );
        },
    getdata(){
      //初始化时获取到你的表格的所有的数据或者查询出的数据
        this.allExportData=表格的所有的数据或者查询出的数据
    }
    

    相关文章

      网友评论

          本文标题:vue中前端导出Excel

          本文链接:https://www.haomeiwen.com/subject/ymzfedtx.html